Fatal编程技术网
  • javascript/
  • 如何使用HTML5和javascript在循环中逐个动态显示多个视频

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

javascript html

如何使用HTML5和javascript在循环中逐个动态显示多个视频,javascript,html,Javascript,Html,我正在尝试使用html5和java脚本一个接一个地显示多个视频。。但是它不会来。。我使用了下面的代码 <html> <head> <title>video example</title> </head> <script> video_count =1; videoPlayer = document.getElementById("ss"); video=document.getElementById("myVideo");

我正在尝试使用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>


视频示例
视频计数=1；
videoPlayer=document.getElementById（“ss”）；
video=document.getElementById（“myVideo”）；
函数运行（）{
视频计数++；
//警报（视频计数）；
如果（视频计数=4）视频计数=1；
var nextVideo=“视频/视频”+视频计数+”.mp4”；
//videoPlayer.src=nextVideo；
警报（nextVideo）；
setAttribute（“src”，nextVideo[video_count]）；
视频播放器；
}
视频播放器。合一（功能（e）{
如果（！e）{
e=窗口事件；
} 
run（）；
};
当前代码仅显示第一个视频，它将停止…



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


视频示例
视频计数=1；
videoPlayer=document.getElementById（“ss”）；
video=document.getElementById（“myVideo”）；
函数运行（）{
视频计数++；
如果（视频计数=4）视频计数=1；
videoPlayer.setAttribute（“src”、“video/video”+video_count+”.mp4”）；
video.play（）；
}
变化：

  • 在关闭body标记之前放置javascript代码，以确保在运行脚本之前加载视频对象
  • 视频元素已经有一个“onended”属性，所以您可以从那里调用run函数。 
  • videoPlayer.setAttribute（“src”，nextVideo[video\u count]）；
    有一个问题。
    nextVideo[video\u count]
    意味着nextVideo是一个数组，但不是。它是一个字符串。因此，在设置属性时可以直接使用nextVideo
  • videoPlayer=document.getElementById（“ss”）；
    获取源元素。您不能对该对象调用play（）函数，因为该函数没有为其定义。因此
    video.play（）
    应该可以正常工作
希望这能解决你的问题。

让我看看我的：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>


地铁地图
var video_list=[“跳伞视频-自由落体酒店客房预订-Hotels.com.mp4”，
“体验康拉德酒店及度假村mp4”，
“艾里山赌场度假村-夏季电视广告2.mp4”
];
var-video_指数=0；
var video_player=null；
函数onload（）{
控制台日志（“主体加载”）；
video\u player=document.getElementById（“空闲视频”）；
video_player.setAttribute（“src”，video_列表[video_索引]）；
视频播放器。播放（）；
}
函数onVideoEnded（）{
console.log（“视频结束”）；
if（视频索引<视频列表长度-1）{
视频索引++；
}
否则{
视频_指数=0；
}
video_player.setAttribute（“src”，video_列表[video_索引]）；
视频播放器。播放（）；
}

很好用。谢谢你

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

在此函数之前调用video.play（）；需要添加：video.load（）； 否则，它仍将显示上一个视频。因此，代码应为

video.load（）；

视频播放（）；

可能重复为什么你要问两次问题？我两次都试了，但对meam gettin不起作用这两个错误拒绝加载chrome-extension://kdidombaedgpfiiedeimiebkmbilgmlc/css/jquery_ui/images/ui-bg_flat_75_ffffff_40x100.png. 资源必须列在web\u可访问\u资源清单键中才能加载通过分机外的页面。有人能告诉我如何在上述代码中设置每个视频的持续时间吗？因为我们正在从文件夹video_count中逐个访问视频，如果文件夹中的任何视频被删除..如何跳过该视频并转到下一个视频？在这一部分中有人能建议我吗？为了使此工作正常，我必须添加video.load（）；在video.play（）之前。@这是唯一的video.load（）；足以加载下一个视频并开始播放。请不要放置代码的图像，而是直接将代码粘贴到编辑器中并将其格式化为代码。有关格式化的帮助这不是回复，而是注释，应该放在您想要感谢的任何回复下。要使此工作正常，您需要添加
mute=“mute”
对于
tagIt，当视频结束时刷新视频元素，如何消除该光点并顺利播放下一个视频？