为HTML视频增加时间

如何解决为HTML视频增加时间

我正在尝试使用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>

我想显示剩余时间，但无法使用。我该如何解决？

如何在视频播放5分钟后让它响？

非常感谢您

解决方法

您尚未为视频元素指定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>

（2）对于每5分钟一次的声音，请记住JS是以毫秒为单位计算的（例如1秒是1000毫秒，因此您需要使用60,000 x 5的值来表示5分钟）。因此，您需要类似以下示例的逻辑。

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
}

PS：如果用户搜索视频等，您的想法可能会中断，因此，如果您只想让计时器每5分钟播放一次声音，而不管.currentTime为何，请使用settimeout或{{1} } ...

尝试添加html倒数计时，并将其与“视频在xx秒后结束” 文本同步。
如果这不起作用，请尝试执行类似Youtube倒计时的操作（如果您可以检查元素代码并找到正确的代码），就可以做到！

为HTML视频增加时间

如何解决为HTML视频增加时间

解决方法

相关推荐