video视频多个循环播放

在项目中遇到视频循环播放的问题,使用一个video标签在视频结束时替换src会导致iOS设备出现黑屏,而两个video标签在iOS上可能出现播放错误。解决方法是保留两个video标签,但移除第二个视频的autoPlay属性,以实现跨平台的无缝衔接循环播放。对于iOS 9设备,目前只能播放第一个视频。
摘要由CSDN通过智能技术生成

做项目的时候遇到一个问题,记录一下:

要求是播完第一个视频以后,再无缝衔接第二个视频并循环播放第二个视频。

一开始想的是用一个video标签去播放视频

<video
    className="video"
    ref={
   dom => (this.videoDom = dom)}
    preload="auto"
    poster={
   videoBg}
    webkit-playsinline="true"
    playsInline={
   true}
    x-webkit-airplay="true"
    src={
   video
如果要让多个视频按照顺序循环播放,我们可以利用JavaScript来实现。 首先,我们需要创建一个HTML页面来显示视频。在页面中,我们可以使用`<video>`标签来嵌入视频,并设置id属性来唯一标识每个视频。 接下来,我们可以使用JavaScript来控制视频播放。我们可以使用`document.getElementById()`方法来获取视频的元素,然后使用`play()`方法来播放视频。 我们可以创建一个数组来保存所有要播放视频的id。然后,我们可以使用一个循环来遍历数组中的每个视频id,并根据id获取对应的视频元素进行播放播放完一个视频后,我们可以通过监听`ended`事件来捕捉到视频播放结束的事件,并在事件回调函数中进行下一个视频播放。 具体代码如下所示: ```html <!DOCTYPE html> <html> <head> <title>JS多个视频顺序循环播放</title> </head> <body> <video id="video1" src="video1.mp4"></video> <video id="video2" src="video2.mp4"></video> <video id="video3" src="video3.mp4"></video> <script> var videos = ["video1", "video2", "video3"]; var currentVideoIndex = 0; function playNextVideo() { var videoElement = document.getElementById(videos[currentVideoIndex]); videoElement.play(); currentVideoIndex = (currentVideoIndex + 1) % videos.length; } function onVideoEnded() { playNextVideo(); } document.addEventListener("DOMContentLoaded", function() { for (var i = 0; i < videos.length; i++) { var videoElement = document.getElementById(videos[i]); videoElement.addEventListener("ended", onVideoEnded); } playNextVideo(); }); </script> </body> </html> ``` 以上代码会依次播放`video1.mp4`、`video2.mp4`和`video3.mp4`这三个视频,并且在最后一个视频播放完后再次循环播放。你可以根据实际需求修改视频的数量和文件名。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值