在座的傻 x
本喵来了
今天写的文章一(亿)级棒!
没错,今天要说的对象就是“网页播放器”这个逼,这玩意看起来没什么难度,但实际上有几个坑,下面由本帅气无敌喵逐一解说如何解决在开发中可能会遇到的坑。
无法自动播放全屏问题手机端播放器自定义控制条无法显示
01无法自动播放
不就是 video 标签添加一个 autoplay 吗?很遗憾...事情并没有这么简单。
桌面版的 Safari 在2017 年的 11 版开始禁止了带有声音的视频自动播放,2018 年4月份发布的 Chrome 66 也禁止了,随后各个浏览器都跟随着苹果和谷歌两位大佬的脚本逐一禁止了。
请注意,是禁止带有声音的网页视频自动播放,因此,自动播放和声音是有奸情!!!
想要自动播放可以通过以下几种方式解决。
video 标签添加一个 muted属性(静音)
静音的视频是允许自动播放。
用户在网站上进行了互动
这个办法在字面上可能很难理解,举个栗子吧。
杰瑞鼠打开了浏览器,访问了黄网“TOM and JERRY”的首页(带有视频),在首页点击某个黄涩视频链接,进入到了这个视频详情。
那么假设首页和这个视频详情的 video 都有 autoplay 这个属性,没有 muted 属性,请问这两个视频是否在网页加载的那一刻起能够自动播放吗?
答案是:首页的 video 不能自动播放,但是视频详情里的 video 可以播放(且有声音),因为在同一个会话里,在进入视频详情前,用户已经打开了同站点下的首页,也就是说,用户已经与网站进行了交互,而用户刚进入首页前,是没有访问过同站点下的其他网页,也即是没有任何交互,因此首页的 video 不能自动播放。
浏览器设置“允许自动播放”
这种方法就是全面开放自动播放功能,没有“静音”和“交互”的限制了,需要用户自行设置。以chome 浏览器为例,在地址栏访问 chrome://flags/,搜索“Autoplay”,即可搜索到该设置(不过,高版本的 chrome 已经不是在这里设置了,本喵也找不到设置的地方)。
再以火狐浏览器为例,在选项里找“自动播放”,即可找到。
浏览器域名白名单(未证实)
听说浏览器有个域名白名单的东西,只要将域名填入该白名单,访