81 lines
2.0 KiB
HTML
81 lines
2.0 KiB
HTML
{% extends 'courses/base.html' %}
|
|
|
|
{% block head_title %}- {{ lesson.title }}{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container px-4">
|
|
<h2 class="text-2xl font-bold">{{ lesson.title }}</h2>
|
|
<div class="flex justify-center">
|
|
<div class="w-5/6">
|
|
<video id="player" playsinline controls >
|
|
<source src="{{ lesson.media.url }}" type="video/mp4" />
|
|
</video>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
<script src="https://cdn.plyr.io/3.7.8/plyr.polyfilled.js"></script>
|
|
<script>
|
|
const player = new Plyr('#player');
|
|
|
|
window.onload = function() {
|
|
|
|
player.currentTime = {{ play_time }};
|
|
console.log('Current time:', player.currentTime);
|
|
}
|
|
|
|
function getCookie(name) {
|
|
let cookieValue = null;
|
|
if (document.cookie && document.cookie !== '') {
|
|
let cookies = document.cookie.split(';');
|
|
for (let i = 0; i < cookies.length; i++) {
|
|
let cookie = cookies[i].trim();
|
|
if (cookie.substring(0, name.length + 1) === (name + '=')) {
|
|
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
return cookieValue;
|
|
}
|
|
|
|
let csrftoken = getCookie('csrftoken');
|
|
|
|
let url = '{{ lesson.get_absolute_url }}';
|
|
|
|
function postData(url = '', data = {}) {
|
|
return fetch(url, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRFToken': csrftoken
|
|
},
|
|
body: JSON.stringify(data)
|
|
})
|
|
.then(response => response.json());
|
|
}
|
|
|
|
// print current time on play every 10 seconds
|
|
setInterval(() => {
|
|
console.log('Current time:', player.currentTime);
|
|
let data = {
|
|
user: '{{ request.user.id }}',
|
|
lesson: '{{ lesson.id }}',
|
|
time: player.currentTime};
|
|
|
|
postData(url, data)
|
|
.then(data => {
|
|
console.log(data);
|
|
});
|
|
}, 10000);
|
|
|
|
player.on('pause', event => {
|
|
console.log('Video paused', player.currentTime);
|
|
});
|
|
</script>
|
|
{% endblock %}
|