WithCoderWithCoderWithCoder

html中video自动播放autoplay属性无效--添加muted属性

    因为要在页面中播放一段视频,想到用 html5 的 video 标签打开 mp4 格式文件,并设置自动播放属性autoplay。在使用Chrome预览时,视频画面已加载出来,但是却无法自动播放,使用火狐浏览器可以自动播放。最初代码如下:

<video src="/static/video/hat_check.mp4" width="100%" height="100%" autoplay="autoplay" loop="loop"></video>

    因为是第一次使用 video 标签,找了好久原因,一直不能解决,视频一直不能播放。

    网上搜索后,发现 video 标签有一个属性muted,可以解决不播放的问题。关于muted标签的解释是这样的:

    html中video自动播放autoplay属性无效--添加muted属性(图1)

    在加了 muted 属性后,高版本浏览器,对视频静音后,可以保证视频自动播放。

    所以使用最新版本浏览器的同学们需要注意一下这一点。

    html中video自动播放autoplay属性无效--添加muted属性(图2)

    于是对 video 标签添加 muted 属性:

<video muted src="/static/video/hat_check.mp4" width="100%" height="100%" autoplay="autoplay" loop="loop"></video>

    视频可以正常播放,不过注意:这样会导致静音。

欢迎分享交流,转载请注明出处:WithCoder » html中video自动播放autoplay属性无效--添加muted属性