网络播放器被埋没了，看这篇文章就搞定！！！
时间：2023-04-05 01:39:43
HTML5
傻x这里是喵喵！我今天写的文章1（亿）牛逼！没错，今天要说的对象就是“网页播放器”。坑。无法自动播放全屏问题。手机端播放器自定义控制栏无法显示。01无法自动播放。不就是给video标签加上自动播放吗？不幸的是……事情没那么简单。桌面版Safari在2017年11版就禁止自动播放有声视频，2018年4月发布的Chrome66也禁止了。之后，各个浏览器一一照搬苹果和谷歌的脚本。禁止。请注意，禁止自动播放带声音的网页视频，所以自动播放和声音是通奸！！！想自动播放可以通过以下方式解决。在视频标签中添加静音属性（静音）以允许自动播放静音视频。用户在网站上交互这种方法从字面上看可能比较难理解，举个例子吧。JerryRat打开浏览器，访问黄色网络“汤姆和杰瑞”的首页（有视频），点击首页上的色情视频链接，进入视频详情。那么假设这个视频详情的首页和视频都有autoplay属性，但没有muted属性，那么这两个视频能不能从网页加载的那一刻起就自动播放呢？答案是：首页的视频不能自动播放，但是视频详情中的视频可以播放（有声），因为在同一个会话中，在进入视频详情之前，用户已经打开了同一个视频的首页site，也就是说用户已经和网站进行了交互，但是在进入首页之前，用户还没有访问过同一站点下的其他网页，也就是没有交互，所以首页的视频不能自动播放。在浏览器中设置“允许自动播放”的方法是完全开启自动播放功能，不受“静音”和“交互”的限制，需要用户自行设置。以chome浏览器为例，在地址栏访问chrome://flags/，搜索“自动播放”，就可以搜索到这个设置（不过chrome高版本这里就不再设置了，我也可以'找不到设置地点）。再以火狐浏览器为例，在选项中找到“自动播放”，即可找到。浏览器域名白名单（未确认）听说浏览器有域名白名单，只要把域名填在白名单里，访问相关网站就可以自动播放，但是目前我没有有足够的证据证明每一笔大厂的py交易。上述自动播放解决方案都有其自身的缺点。为了让用户体验更好，有时候我们需要检测网页打开时是否支持自动播放。如果没有，视频中间会显示一个播放按钮或出现其他样式，如下粘贴检测自动播放代码。varpromise=document.querySelector('video').play()if(promise!==undefined){promise.then(()=>{//支持自动播放并有声音}).catch(error=>{//不支持自动播放，有声音。此时可以在视频上显示一个播放图标，提示用户点击播放})}但不是所有浏览器的video.play()都支持返回promise。要了解更多信息，您可以访问该网站。https://developer.mozilla.org...02全屏问题废话不多说，先贴代码。
以上全屏代码适用于pc（Windows和Mac）、移动端（Android和IOS），主要使用requestFullscreenAPI，适用于PC和Android，可惜IOS不适用，IOS端可以替代。只能使用webkitEnterFullscreenAPI进入全屏，没有退出全屏的API。进入全屏后，只能使用iphone手势或内置控件退出全屏。如果发现requestFullscreenAPI失效，下面的网站有说明requestFullscreenAPI失效的原因。https://stackoverflow.com/que...不过事情并没有那么简单，在开发过程中还是会遇到很多问题，下面会一一说明。PC端全屏后无法监听ESC键。在PC端，有时退出全屏后需要做一些操作。点击退出全屏按钮运行逻辑是没有问题的，但是别忘了按ESC键也是退出全屏运行，同样需要运行。逻辑。而当元素使用requestFullscreenAPI进行全屏时，不需要写任何代码，默认会使用ESC键退出全屏，我们自然而然会想到使用onkeydown事件监听ESC，虽然onkeydown事件可以被监控，但只有ESC键是无法监控的。document.onkeydown=function(){if(event.keyCode==27){//退出全屏}}也就是说上面的代码，按ESC是不会走的。现在是什么？别着急，我们可以用onresize曲线来救国。当用户按下ESC时，全屏失败，窗口的宽高变小，并触发onresize。这个时候我们会检查是否不是全屏，然后运行逻辑。window.onresize=function(){if(!checkFullScreen()){//按esc退出需要执行的全屏代码}}IOS端的全屏不能自定义控制条。因为IOS端的全屏只能调用webkitEnterFullscreen让video标签全屏（其实就是IOS端自带的全屏。注意：只能用于视频的全屏tag），自定义控制条无法全屏显示。但是我们可以写一个带有样式的“假全屏”代码。上面的代码也兼容Android。但是，这种方法存在一些经验问题。比如在使用重力感应横屏时，浏览器的地址栏会悬浮在上面。无法删除此地址栏。估计用全屏吧也不傻。产品会用到播放器自带的丑陋的控制条...由于我们要自定义控制条的样式，所以我们不会在video标签中添加controls属性，而是在video中添加一个相关的div-box的div下的控制栏。
/div>那么在全屏的时候，我们不仅要考虑让视频全屏，还要考虑让控制栏全屏。实现很简单，只要让video-box的父标签全屏即可。这也是为什么全屏代码中video-box全屏，而不是单独全屏视频，还有父类div来包裹视频的原因。iframe内的元素无法全屏如果视频标签位于iframe内，则iframe必须声明允许全屏。
