gpt4 book ai didi

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

转载 作者:太空狗 更新时间:2023-10-29 14:03:33 25 4
gpt4 key购买 nike

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

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

最佳答案

让我展示一下我的: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>

关于javascript - 如何使用 HTML5 和 javascript 在循环中动态地一一显示多个视频,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20965355/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com