So I'm using videojs to play videos on my webpage, the code that I'm using is provided below. It works well but I have two issues
1: whenever I pause the video there's a popup of More videos as you can see in the linked image. How can I remove that box?
2: I want to capture the time when a user pauses the video and then start the video from the same spot whenever the user returns to the website after logging out. The progress bar should show the time where the user left. Do I have to save the value in my database somewhere and if so then how can I make the progress bar show that value after ther user is logged in?
My Code:
{% load static %}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<video
id="vid1"
class="video-js vjs-default-skin"
controls
autoplay
width="240" height="264"
data-setup='{"textTrackSettings": false, "techOrder": ["youtube", "html5"], "sources": [{ "type": "video/youtube", "src": "https://www.youtube.com/watch?v=W4i2FRZ8gXc"}] }'
>
</video>
<script src="https://vjs.zencdn.net/7.17.0/video.min.js"></script>
<script src="{% static '/js/Youtube.js' %}"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
var myPlayer = videojs('vid1');
if (typeof myPlayer.readyState() === 'undefined' || myPlayer.readyState() < 1) {
// wait for loadedmetdata event
myPlayer.one("loadedmetadata", onLoadedMetadata);
}
else {
// metadata already loaded
onLoadedMetadata();
}
function onLoadedMetadata() {
alert(myPlayer.duration());
$('#duration').html("Duration: " + myPlayer.duration());
}