在ios10+的safair中实现视频的自动播放

yuweia 2021-08-08 原文

在ios10开始safair又开始支持自动播放了。。。阴吹死婷。。只需要在video上加上muted这个属性。并且设置为true，然后加上autoplay就可以自动播放视频，but！！！！加了muted就相当于是设置了视频静音了。所以视频没有声音。或者说视频本身没有音轨的。就可以自动播放。这个还是比较鸡肋的。没啥太大的用处，不过另外一个属性就很有用了。那就是playsinline属性，这个属性可以让我们的视频在浏览器中不必以全屏的形式播放。再配合video.webkitEnterFullScreen();就可以在必要的时候以全屏形式播放视频了，如下：

<video id="video" muted autoplay playsinline src="http://www.runoob.com/try/demo_source/movie.mp4" poster="https://gss0.bdstatic.com/-4o3dSag_xI4khGkpoWK1HF6hhy/baike/whfpf%3D82%2C102%2C50/sign=6df3ad943cc79f3d8fb4b770dc9cf523/4ec2d5628535e5dd43df4db471c6a7efcf1b62ee.jpg"></video>
    <button id="playButton">Play</button>
    <button id="enterFull">Full</button>

<script>
        var btn=document.getElementById("playButton");
        var fullBtn=document.getElementById("enterFull");
        var video=document.getElementById("video");
        fullBtn.addEventListener("click",function(){
           video.webkitEnterFullScreen();
        },false)
        btn.addEventListener("click",function(){
           video.play()
        },false)
</script>