Question

我正在尝试使用html5和java脚本逐个显示多个视频..但它不会......我使用下面的代码

<html>
<head>
<title>video example</title>
</head>
<script>
video_count =1;
videoPlayer = document.getElementById("ss");
video=document.getElementById("myVideo");

function run(){
        video_count++;
        //alert(video_count);
        if (video_count == 4) video_count = 1;
        var nextVideo = "video/video"+video_count+".mp4";
        //videoPlayer.src = nextVideo;
        alert(nextVideo);
        videoPlayer.setAttribute("src", nextVideo[video_count]);
        videoPlayer.play();
   }
videoPlayer.onended(function(e) {
     if (!e) {
        e = window.event;
    } 
 run();
};
</script>
<body onload="run();">
<video id="myVideo" height="400" width="400" autoplay>   
  <source id="ss"  src="video/video1.mp4" type='video/mp4'>

</video>
</body>
</html>

目前代码只显示第一个视频，它将停止...

Answer 1

让我告诉我：D

setString:

Answer 2

<html>
<head>
<title>video example</title>
</head>

<body>
    <video id="myVideo" height="400" width="400" autoplay onended="run();">   
        <source id="ss"  src="video/video1.mp4" type='video/mp4'>
    </video>

    <script>
        video_count =1;
        videoPlayer = document.getElementById("ss");        
        video=document.getElementById("myVideo");

        function run(){
            video_count++;
            if (video_count == 4) video_count = 1;
            videoPlayer.setAttribute("src","video/video"+video_count+".mp4");       
            video.play();

       }

    </script>
</body>
</html>

的变化：

在关闭body标签之前放置javascript代码，以确保在运行脚本之前加载视频对象。
视频元素已经具有“onended”属性，因此您可以从那里调用run函数。
videoPlayer.setAttribute("src", nextVideo[video_count]); 有问题。 nextVideo[video_count]表示nextVideo是一个数组，但不是。它是一个字符串。因此，您可以在设置属性时直接使用nextVideo。
videoPlayer = document.getElementById("ss");获取源元素。你不能在该对象上调用play（）函数，因为没有为它定义该函数。所以video.play()应该可以正常工作。

希望这能解决您的问题。

Answer 3

在此函数之前调用video.play（）;需要添加：video.load（）; 否则，它将仍然显示以前的视频。所以代码应该是

video.load（）;

video.play（）;

Answer 4

它工作正常。谢谢你！

我在下面附上了一些修改后的代码，我希望这对于搜索视频在整个屏幕上连续播放有帮助，

enter image description here

如何使用HTML5和javascript动态循环显示多个视频

4 个答案: