web

原文地址: https://webkit.org/blog/6784/new-video-policies-for-ios/ @jernoble 如果接触过 ios 上的开发，在iphoneOS 3 的时候 safari 只允许用户与 video 进行交互的时候才会触发数据的加载。但是为了将更多的媒体播放控制权重新回到网页开发者，iOS 8放宽了这一限制：Safari开始支持 preload="metadata" 属性，允许<video>和<audio> 元素加载足够的媒体数据，以确定媒体的大小，持续时间和可用的轨迹。对于iOS 10中的 Safari，进一步放宽了对静音<video>元素的用户手势要求。 缘由 事实证明，人们很喜欢GIF。但与现代视频编解码器（如H.264）相比，GIF格式的编码方式与编码动画图像非常不具有性价比。我们发现，GIF的带宽可以高达十二倍。 详情 »

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 详情 »

默认情况下我们实现一个简单的 H5 的播放器，只需要这么简单的代码就好： <video preload width="320" height="240" controls src="./static/videos/1.mp4"></video> 这个时候用户点击播放按钮就可以开始播放了。 但是为了更好的用户体验，我们有的时候需要预加载视频，比如有的视频可能是在用户产生某些交互进行显示播放的。这个时候我们优先想到的是 preload 属性。 此属性用于定义视频是否预加载。属性有三个可选择的值：none、metadata、auto。如果不使用此属性，默认为auto。 None：不进行预加载。使用此属性值，可能是页面制作者认为用户不期望此视频，或者减少HTTP请求。 Metadata：部分预加载。使用此属性值，代表页面制作者认为用户不期望此视频，但为用户提供一些元数据（包括尺寸，第一帧，曲目列表，持续时间等等）。 Auto： 详情 »