带有Javascript的HTML5视频媒体片段

这里没有人对我的问题发表评论，但也许这是一个简单的问题？ 我不熟悉编码，我正在尝试找到一种方法来导航视频，比如播放前10秒然后停止，播放30-40秒然后停止，播放第二个60-30秒然后停止，等等，并为其设置按钮。我找到了一个教程，但是按钮没有响应。我已经清理了一点代码（不认为我删除了任何必要的东西），并将其粘贴到下面。 教程链接：

HTML:

JAVASCRIPT:

function mediaFragOne() 
{
var video, sources, nav, buttons;

video = document.querySelector('video#frag1');
sources = video.getElementsByTagName('source');
nav = document.querySelector('video#frag1+nav');
buttons = nav.getElementsByTagName('button');

for(var i = buttons.length - 1; i >= 0; i--) 
{
    buttons[i].addEventListener('click', function() {
            for (var i = sources.length - 1; i >= 0; i--) {
                sources[i].setAttribute(
                    'src', (sources[i].getAttribute('data-original')
                    .concat('#t=' + this.getAttribute('data-start'))));
                    video.load();
                    video.play();
            };
        });
    }
}
mediaFragOne();

---

这比你想象的要容易。只需设置

currentTime

属性

未经测试，但这应该让您开始：

document.querySelector('nav').addEventListener('click', (e) => {
  if (!e.target.matches('[data-start]')) {
    return;
  }
  document.querySelector('video').currentTime = Number.parseFloat(e.target.dataset.start);
});

---

为了详细说明@Brand answer，您可以这样做：

var vid=document.getElementById（“frag1”）；//将视频设置为可变
var buttons=document.getElementsByTagName（“按钮”）；//元素集合
对于（var i=0；i

第一节
第二节
第三节

当您要单击多个标记时使用

查找包含所有目标标记（例如

）的祖先标记（例如
）

通过引用确定作为事件来源的标记（单击按钮、更新视频时间等）

在回调函数中，它应该只应用于目标标记，并排除所有其他标记

if (clicked.matches('a')) {...
...}
return false;

演示中评论的详细信息

：根{
字体：400 2.5vw/1.2控制台
}
维德先生{
显示：块；
保证金：0自动；
宽度：80vw；
}
.基站{
显示器：flex；
证明内容：中心；
宽度：80vw；
保证金：0自动；
}
a{
显示：块；
利润率：5px8px；
边框：1px实心#000；
边界半径：8px；
文字装饰：无；
文本对齐：居中；
填充物：3px 5px；
宽度：15vw；
}
//宣告结束
让我们结束；
//引用所有按钮的父标记
const btns=document.querySelector（'.btns'）；
//参考视频
const vid=document.querySelector（'.vid'）；
//将单击事件注册到nav.btns
btns.addEventListener（'click'，frag）；
//将timeupdate事件注册到video.vid
参见addEventListener（“时间更新”，停止）；
//传递事件对象
功能框架（事件）{
//Event.target始终指向单击的按钮、时间更新的视频等。
const clicked=event.target；
//如果单击的标记是。。。
如果（单击。匹配（'a'））{
//获取其数据start的值并将其转换为实数
让start=Number（单击.dataset.start）；
//将end设置为it data end的值，并将其转换为实数
结束=编号（单击.dataset.end）；
//将视频当前时间设置为“开始”值
vid.currentTime=启动；
//播放视频
视频播放（）；
}
//端函数
返回false；
}
//传递事件对象
功能停止（事件）{
//参考视频
const vid=event.target；
//如果它是一个。。。
如果（视频匹配（'video'））{
//如果视频时间当前等于或超过end的值。。。
如果（vid.currentTime>=结束）{
//暂停视频
参阅暂停（）；
}
}
//端函数
返回false；
}

非常感谢，但我想这已经超出了我的理解范围。我一直在尝试遵循该教程，我同意它似乎比它需要的更复杂。我不明白为什么它在代码笔中工作，但在我复制和粘贴它时却不起作用。我感谢你的帮助，我欢迎任何其他实现它的方法，但我是诚实的我不知道如何处理您键入的代码。我尝试将其粘贴到我的js文件中，但没有效果。@epignosis567此代码中有一个错误。修复了它。此代码所做的只是为

nav

元素添加一个

click

处理程序，如果单击其中的任何按钮，它将被触发。（然后，通过检查

数据开始

属性的事件目标[单击的内容]，检查以确保单击的是其中一个按钮。）然后，我们只需将视频元素的

当前时间

设置为

数据开始

属性中的数字。（这可以通过

数据集

属性访问。）谢谢，我非常感谢您的帮助，但它在我这方面仍然不起作用。我现在正在尝试解决这个问题。控制台在参数列表script.js之后给我发送了以下消息：Uncaught SyntaxError:missing）2@epignosis567修复了另一个打字错误…请注意，

[数据开始]

超出了字符串范围。谢谢。我的问题是：我可以单击“运行代码片段”，它在本页上看起来很有效，但当我复制到我的文件时，它突然不起作用。我会阅读你链接的引用，但你知道为什么不起作用吗？你上面写的是我正在尝试的。是的我在dataDuration中出错-忘记添加“000”。请立即检查。您好。是的，我正在查看它。我正在尝试，但它仍然不起作用。页面已加载，但按钮没有响应。不过我会继续使用它。如果我单击此页面上的“运行代码片段”，它会起作用，但如果我将其复制到html编辑程序中，它会起作用

document.querySelector('nav').addEventListener('click', (e) => {
  if (!e.target.matches('[data-start]')) {
    return;
  }
  document.querySelector('video').currentTime = Number.parseFloat(e.target.dataset.start);
});

document.querySelector(ancestor).addEventListener('click', callback);

function callback(event) {...

const clicked = event.target

if (clicked.matches('a')) {...
...}
return false;