解决新版本 Chrome 提示 DOMException: The play() request was interrupted 解决新版本 Chrome 提示 DOMException: The play() request was interrupted 大概在一些新版本的浏览器中，我们是用 audio 或者 video 进行媒体资源播放的时候，可能会在控制台看到这个输出: Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause(). Or Uncaught (in promise) DOMException: The play() request was interrupted by a new load request. 如何触发？ < 详情 »
前些天 Apple 正式向用户推送了他们的新一代 Mac OS MacOS High Sierra 。这次带来了新的 Safari 浏览器，然而一个不好的消息，是 safari 重新制定了新的限播策略。点击这里 了解上个版本的播放限制策略调整。 现在网页用包含 video 或者 audio 的标签，如果涉及了 autoplay 属性，浏览器现在不再进行自动播放，而用户需要在 url 的状态栏进行设置（右击就好）： 里面会有三个选项： 允许自动播放 永不自动播放 停止播放含有声音的媒体 官方也给了建议，你可以通过代码来监听是否自动播放： var promise = document.querySelector('video').play(); if (promise !== undefined) { promise.catch(error => { // Auto-play was prevented // Show a UI element 详情 »
Detecting browser compatibility for HTML5 video and audio 原文链接 https://www.nomensa.com/blog/2011/detecting-browser-compatibility-html5-video-and-audio 近期接触播放器项目，所以对 video 除了基本的 api 的了解，还需要做好对应的兼容性。Chrome 最早在 11年开始了对于 video 的支持，不同的浏览器当时对于格式支持也是不同。 浏览器对于 video 元素的支持情况* 目前对于 其中对于 MPEG-4/H.264 的支持还是比较广泛的 至于大家比较关心的 webm ，在移动端和 safari 上支持还不是特别理想。 而最新的 HEVC/H.265 的支持情况浏览器方便的支持还是非常不理想。 好在 video 提供了一些列方法让我们能够探测到是否能够对给出的文件进行正常播放。 判断 mimeType 我们需要根据我们视频的类型然后去进行格式的判断以及其获取它的编码格式。 var get_ 详情 »
最近做视频相关，在全屏的时候之前 自以为捕获 esc 就可以了。也就是: document.addEventListener('keyup', (e) => { if (e.which === 27) { // your code } }) 然后实际上是没有什么效果，一查资料发现: When fullscreen mode is successfully engaged, the document which contains the element receives a fullscreenchange event. When fullscreen mode is exited, the document again receives a fullscreenchange event. 也就是实际上我们需要触发 fullscreenchange 事件来实现退出全屏的事件绑定。 function exitHandler() { const hideFunc = function() { // your 详情 »
