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

Question

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

我试图使用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>

Run Code Online (Sandbox Code Playgroud)

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

Answer 1

yus*_*loh 9

让我看看我的:D

<html>
<head>
    <title>Subway Maps</title>

    <link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body onload="onload();">
    <video id="idle_video" width="1280" height="720" onended="onVideoEnded();"></video>
    <script>
        var video_list      = ["Skydiving Video - Hotel Room Reservation while in FreeFall - Hotels.com.mp4",
                                "Experience Conrad Hotels & Resorts.mp4",
                                "Mount Airy Casino Resort- Summer TV Ad 2.mp4"
                            ];
        var video_index     = 0;
        var video_player    = null;

        function onload(){
            console.log("body loaded");
            video_player        = document.getElementById("idle_video");
            video_player.setAttribute("src", video_list[video_index]);
            video_player.play();
        }

        function onVideoEnded(){
            console.log("video ended");
            if(video_index < video_list.length - 1){
                video_index++;
            }
            else{
                video_index = 0;
            }
            video_player.setAttribute("src", video_list[video_index]);
            video_player.play();
        }
    </script>
</body>

Run Code Online (Sandbox Code Playgroud)

为此，您需要为 `<video>` 标签添加 `muted="muted"` (2认同)

Answer 2

anu*_*upr 5

<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>

Run Code Online (Sandbox Code Playgroud)

变化：

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

希望这能解决您的问题。

为此，我必须添加 video.load(); 在 video.play(); 之前。 (2认同)

归档时间：	11 年，11 月前
查看次数：	30590 次
最近记录：	6 年，11 月前