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

时间:2019-04-28 20:33:48

标签: html5 video markers

如何在网站上添加超链接以从.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>

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

1 个答案:

答案 0 :(得分:0)

您在上面使用的媒体片段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);