Safari视频无法正常运行,但所有浏览器均可自动播放。一对一播放多个视频

时间:2019-03-19 07:31:35

标签: javascript css html5

** html5视频野生动物园自动播放不起作用????????? 我的多个视频播放代码一个接一个地工作良好,但无法正常使用safari浏览器,有任何方法可以在safari中启动自动播放,也请帮我这个查询。在Safari浏览器中使用和正常工作的任何方式。 还有其他方法可以使用它。 谢谢 该代码仅是我正在使用的HTML和js CSS,用于在其中创建ID并用于在浏览器中播放视频。 **

    <div class="video-container " id="video_auto_play">
<video autoplay="autoplay" controls muted id="home_videoPlayer" style="object-fit: initial;" >
  <source id="home_videoPlayer" style="object-fit: initial;"  type="video/mp4" />
</video>
<script> 
    document.getElementById('home_videoPlayer').play(); 
</script>
</div>


<script>
var videoSource = new Array();


videoSource[0] = 'a1.mp4';
videoSource[1] = 'a2.mp4';
videoSource[2] = 'a3.mp4';
videoSource[3] = 'a4.mp4';

var i = 0; // define i
var videoCount = videoSource.length;

function videoPlay(videoNum) {
    document.getElementById("home_videoPlayer").setAttribute("src", videoSource[videoNum]);
    document.getElementById("home_videoPlayer").play();
    document.getElementById("home_videoPlayer").play();
}
document.getElementById('home_videoPlayer').addEventListener('ended', myHandler, false);
videoPlay(0); // play the video

function myHandler() {
    i++;
    if (i == (videoCount - 0)) {
        i = 0;
        videoPlay(i);
    } else {
        videoPlay(i);
    }
}
</script>

1 个答案:

答案 0 :(得分:0)

工作正常。您是否在菜单栏中选中了Safari>本网站的设置?

enter image description here

   document.getElementById('home_videoPlayer').play(); 


var videoSource = new Array();


videoSource[0] = 'https://www.w3schools.com/tags/movie.mp4';
videoSource[1] = 'https://www.w3schools.com/tags/movie.mp4';
videoSource[2] = 'https://www.w3schools.com/tags/movie.mp4';
videoSource[3] = 'https://www.w3schools.com/tags/movie.mp4';

var i = 0; // define i
var videoCount = videoSource.length;

function videoPlay(videoNum) {
    document.getElementById("home_videoPlayer").setAttribute("src", videoSource[videoNum]);
    document.getElementById("home_videoPlayer").play();
    document.getElementById("home_videoPlayer").play();
}
document.getElementById('home_videoPlayer').addEventListener('ended', myHandler, false);
videoPlay(0); // play the video

function myHandler() {
    i++;
    if (i == (videoCount - 0)) {
        i = 0;
        videoPlay(i);
    } else {
        videoPlay(i);
    }
}
<div class="video-container " id="video_auto_play">
<video autoplay="autoplay" controls muted id="home_videoPlayer" style="object-fit: initial;" >
  <source id="home_videoPlayer" style="object-fit: initial;"  type="video/mp4" />
</video>
</div>