HTML5 _ 如何向视频标记添加超链接

Question

如何在网站上添加超链接以从.html5-doc 的src1、src2 和src3 中指示的时间开始播放视频？任何可以访问该网站的人都应该这样做。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Page Title</title>
</head>
<body>

<video controls>

<source src1="C417.mp4#t=0,5"
      type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"'/>


<source src2="C417.mp4#t=5,10"
      type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"'/>


  <source src3="C417.mp4#t=10,15"
      type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"'/>

</video>

</body>
</html>

谢谢

更新：尝试了一些。如何正确地将功能附加到按钮？视频应在 5 秒后通过单击按钮开始播放。它不像这里那样工作：

  <video controls>
    <source id="video_ID1" src="C111a.mp4"
            type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"'/>
    </video>

    <button onclick="bxClick1()">5sec</button>

        <script>
            function bxClick1() {
                document.getElementById("video_ID1").addEventListener('loadedmetadata', function() 
            {
                    this.currentTime = 5;
            }, false);                
        }
        </script>

视频已显示，可以通过默认控件启动。播放按钮的附件是我的问题

Answer 1

您在上面使用的媒体片段 URL 方法看起来是正确的 - 它的问题是过去并非所有浏览器都支持它。

您可以使用 Javascript 预加载视频并在加载后立即跳转到您想要的任何位置来实现相同的目的。

请参阅下面的示例 - 假设您将 ID 添加到您的视频中：

<source id ="videoID_1" src1="C417.mp4"
      type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"'/>    

document.getElementById('videoID_1').addEventListener('loadedmetadata', function() 
      {
        this.currentTime = 5;
      }, false);

HTML5 _ 如何向视频标记添加超链接

HTML5 _ How to add hyperlinks to Video Markers

html

video

markers