chromuim内核video audio标签自动播放

方法1:设置静音播放

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    // 表示一打开就是静音播放
    <video controls autoplay muted loop style="width:500px;">
        // 为了兼容不同浏览器,显示MP4,不兼容则用webem
        <source src="media/open.mp4">
         <source src="media/open.webm">
         //浏览器不支持video才显示
          <p>
            对不起,你的浏览器不支持video元素,请点击这里下载最新版本的浏览器
        </p>
    </video>
</body>

</html>

 

注:

video
controls: 控制控件的显示,取值只能为controls

某些属性,只有两种状态:1. 不写 2. 取值为属性名,这种属性叫做布尔属性

布尔属性,在HTML5中,可以不用书写属性值

autoplay: 布尔属性,自动播放。

muted: 布尔属性,静音播放。

loop: 布尔属性,循环播放

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

方法2:关闭默认策略

chromuim 66 版本以后的内核,在默认情况下<video>和<audio>标签已经不能自动播放了。需要用户点击触发后才播放,或者要把播放设置为静音模式才可自动播放。

但很多情况下,我们希望用户看到这个标签后,就可以自动播放标签资源。还好,内核预留了设置开关。

我们可以使用 --autoplay-policy=no-user-gesture-required 来关闭这个默认策略

  

 

原文地址:

https://blog.csdn.net/qq_42931285/article/details/124139240

https://blog.csdn.net/jiangqin115/article/details/105746549

 

posted @ 2022-05-18 15:53  一万年以前  阅读(20)  评论(0编辑  收藏  举报