如何解决为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倒计时的操作(如果您可以检查元素代码并找到正确的代码),就可以做到!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。