使用javascript在html5中点击图片时播放视频?

时间:2013-07-03 01:13:07

标签: javascript html5 html5-video

我是JavaScript的初学者。我想在HTML5中播放特定时间的mp4文件一段时间。首先,我想加载缩略图。如果点击它,我想播放特定时间的视频文件。这是我的代码。但它不是从6开始。它只是从头开始。我做错了什么?

<!DOCTYPE html>
<html>
<head>
 <script type="text/javascript">
     function PlayVideo(anchor,vid, start_time, end_time, video_file) {
         document.getElementById(anchor).outerHTML = 
                 "<video id='" + vid + "' controls width='320'> <source src='" + video_file + "'              
                 type='video/mp4'/></video>"

        var video = document.getElementById(vid);

        video.play();
        video.currentTime = start_time;

        video.addEventListener('timeupdate', function() {
            if(this.currentTime > end_time) {
                this.pause();
                this.currentTime = start_time;
            }
        });
        document.getElementById(aid).style.display = "none";
    }
    </script>
</head>
<body>
<a id="anchor" onclick="PlayVideo('anchor','003', 5, 9, 'test.mp4');"><img src ="test.jpg" alt="trail" /></a>

</body>
</html>

1 个答案:

答案 0 :(得分:1)

尝试

document.getElementById(anchor).outerHTML = "<video id='" + vid + "' controls width='320'> <source src='" + video_file + "'
type='video/mp4'/></video>";

注意

  

<强>