Javascript 将剩余时间添加到HTML视频_Javascript_Html_Css_Video_Countdown

Javascript 将剩余时间添加到HTML视频

javascript html css video

Javascript 将剩余时间添加到HTML视频,javascript,html,css,video,countdown,Javascript,Html,Css,Video,Countdown,我正在尝试使用Chrome观看视频。特别是，我想向它添加一些有用的命令，例如倒计时元素。这是我的代码： <html> <head> <meta name="viewport" content="width=device-width"> <script> var video = document.getElementById('video'); video.ad

我正在尝试使用Chrome观看视频。特别是，我想向它添加一些有用的命令，例如倒计时元素。这是我的代码：

<html>
<head>
    <meta name="viewport" content="width=device-width">

    <script>
        var video = document.getElementById('video');
        video.addEventListener('timeupdate', updateCountdown);

        function updateCountdown() {
            var timeSpan = document.querySelector('#countdown');
            timeSpan.innerText = video.duration - video.currentTime;
        }
    </script>
        
</head>
    
    
<body>
    <video id="video" controls="" autoplay="" name="media"><source src="file://..........." type="video/mp4"></video>
    <div style="color:RED;" id="countdown">Video ends after <span id="countdown">xx</span> seconds.</div>
</body>
</html>


var video=document.getElementById（'video'）；
video.addEventListener（'timeupdate'，updateCountdown）；
函数updateCountdown（）{
var timeSpan=document.querySelector（“#倒计时”）；
timeSpan.innerText=video.duration-video.currentTime；
}
视频在xx秒后结束。

我想让它显示还有多少时间，但它不起作用。我怎样才能修好它

我怎样才能让它在每过5分钟的视频后响起

提前非常感谢

尝试添加html倒计时，并将其与“视频在xx秒后结束”文本同步
如果这不起作用，那么尝试一下Youtube的倒计时（如果你可以检查元素代码并找到正确的代码），你可以做到

您没有为视频元素指定id，因此getElementById无法找到它。浏览器的开发工具控制台上一定有一些错误，您看到了吗

要计算5分钟的时间，可以使用setTimeout函数并让它调用一个创建声音的函数。

（1）首先创建HTML元素，以便在使用Javascript控制它们时它们是存在的

<html>
<head> <meta name="viewport" content="width=device-width"> </head>
   
<body>
    <video id="myVideo" name="media" controls autoplay>
    <source src="file://..........." type="video/mp4"></video>
    <div style="color:RED;" id="countdown">Video ends after <span id="countNumbers"> xx  </span> seconds.</div>
</body>

<script>
     
    var vid = document.getElementById("myVideo");
    vid.addEventListener("timeupdate", updateCountdown, true);
 
    var timeSpan = document.getElementById("countNumbers"); //# was document.querySelector('#countdown'); 

    function updateCountdown() 
    {  timeSpan.innerText = Math.round(vid.duration - vid.currentTime); }

</script>

</html>

PS：如果用户搜索视频等，您的想法可能会失败，因此如果您只想要一个每5分钟播放一次声音的计时器，而不考虑

。currentTime

，则使用

settimeout

或

setinterval

。

它会给我

未捕获类型错误：无法读取视频中null的属性“addEventListener”。HTML:6

是，这是正确的。这是因为您没有为视频元素指定id。在查找具有该id的元素时，请为其指定id=“video”。请更新问题中的代码以显示您现在拥有的内容。现在的问题是，在尝试访问视频元素时，您的HTML div尚未加载。将JavaScript放在HTML之后。最好了解onload事件，以便将来参考。太棒了！正如我所说的，了解onload事件，这样您就可以确保在将来的项目需要它们时加载它们。嗨！我正在努力，但我不知道如何用正确的方式去做。这能回答你的问题吗？不，对不起。在提出这个问题之前，我阅读并使用它进行了尝试，但之后我无法使我的代码正常工作

if( video.currentTime >= (lastTime + five_mins) ) 
{ 
    //# update new "lastTime" to start from here onwards
    //alert(" 5 mins have passed ... ");
    lastTime = video.currentTime; 
    soundFile.play; //# play the audio tag by its ID
}