javascript - 如何在 javascript/html5 中设置时钟和视频时间
问题描述
我需要一个数字时钟和一个页面上的视频。当时钟到达每分钟的第 35 秒时,视频应该开始播放。
例如,在 21:00:35 时,开始播放 15 秒的视频剪辑。一旦它到达剪辑的结尾,它就会一直坐到 21:01:10。相同的 15 秒视频剪辑再次开始播放,然后在 21:01:45 再次开始播放。
function showTime() {
var date = new Date();
var h = date.getHours(); // 0 - 23
var m = date.getMinutes(); // 0 - 59
var s = date.getSeconds(); // 0 - 59
if (h < 10) {
h = "0" + h;
}
if (m < 10) {
m = "0" + m;
}
if (s < 10) {
s = "0" + s;
}
var time = h + ":" + m + ":" + s;
document.getElementById('myClock').innerText = time;
document.getElementById('myClock').textContent = time;
setTimeout(showTime, 1);
}
showTime();
<i>
<video width="320" height="240" controls>
<source src="Myvid01.mp4" type="video/mp4">
</video>
</i>
解决方案
你的例子让我有点困惑,所以请原谅我,但如果你只需要
当时钟达到每分钟的第 35 秒时,视频应该开始。
你可以在你的视频中添加一个 id
<video id="player" width="320" height="240" controls>
如果 s = 35,则将 play() 添加到您的函数中
if (s === 35 ) {
player.play();
}
推荐阅读
- python - 如何在 pos odoo13 中覆盖 models.js 中的模型
- ios - 如何使用循环从 Firebase 实时数据库中读取数据
- google-chrome-devtools - 如何抑制 Chrome DevTools 警告:“DevTools 无法加载 SourceMap:无法为...加载内容”
- xamarin - Xamarin.Forms:远离母版页的导航丢失箭头
- reactjs - Semantic UI React:如何使 Tab 菜单使用容器的全宽?
- r - 从多边形R中的边缘创建从质心到20 m的缓冲区
- ruby - 为什么 ruby 不能使用大多数 2^X 数字作为对象 ID?
- azure - 训练马拉地语的基线模型失败
- java - org.springframework.data.mongodb.core.mapping.Document 无法引用
- python - 使用单词表达式列表提取文本中的句子并没有真正起作用