非常早之前写过关于一篇《[译]Medium 是如何优化图片加载的》 的文章。 最近在看一些视频封面的优化，其中会有一些黑屏的问题，于是乎想到了是不是可以借鉴这种风格。 大概原理还是，可以根据视频的 loadeddata 事件，然后将覆盖在上面的模糊的封面图隐藏，然后播放视频。 html <div class="video-container"> <video width="720" src=""></video> <div class="cover"></div> </div> CSS .video-container { position: relative; width: 720px; display: none; 详情 »
DRM （英语：Digital rights management，缩写为DRM）是一系列访问控制技术，通常用于控制数字内容和设备在被销售之后的使用过程[3][4][5]。DRM有时也称为拷贝保护、复制控制、技术保护措施等。许多数字出版社和软件厂商都使用了DRM，例如亚马逊、AT&T、AOL、Apple Inc等。它如今一次成为很多公司最为基本的一想服务和要求。而且在音视频，文档，电子书领域都有他的存在。这里自己主要介绍音视频中的 DRM。 如今，电视音乐已经成为我们生活的一部分。如果大家回忆历史的话，我们最初接触这些东西是通过电视，而不是 APP。那个时候大家还流行通过租借 VCD 的形式，来看成龙周星驰的电影。随着数字媒体的兴起，我们可以非常容易的在网上看到最新的电影，这给电影的制作商带来了非常大的利益损失。因此对于非常复制的盗版打击，一直都是这些从事内容提供商一直需要去处理的事情。 DVD论坛的内容扰乱系统是一个早期的DRM系统。它使用简单的加密算法，制作DVD播放器的厂商必须获得授权在产品中实现此技术，然后才能解密并播放DVD中的加密内容。授权条款规定了播放DVD内容的方式，包括输出信号的格式和方式，以保证在电视上播放时视频的加密不受破坏。 在1999年，微软发布了WMDRM，用于执行媒体文档包含的DRM指令，限制用户对媒体文档的使用。这些DRM指令可以指定文档的播放次数、是否能被备份或转发。 详情 »
准备开始写一系列关于 DRM。由于自己主要从事流媒体工作，这里也以流媒体的内容为主。 这里大概会写几篇，代码部分会聚焦在 Web 端的内容处理。自己最近一直在从事这方面的工作，因此也希望罗列整理一些资料，分享自己在这方面的一些心得。 DRM 目前已经存在于绝大多数的服务 APP 中。最直观的体验，就是你可以尝试看一些来自 Disney 等电影公司的电影，时候你可以尝试截图试一下： 我们可以从 Bilibili 网站点击进去，发现截图的时候是黑屏。这样也是为了防止录屏将视频流出去。尽管我们有 DRM 保护技术，但是还是依旧存在严重的流媒体盗版事件。因此DRM发展依旧有很长的路。 这一些列文章，自己将从下面几个部分区介绍: 什么是 DRM 常见的流媒体DRM 方案 Web 前端如何支持 DRM 深入理解 Widevine HDCP介绍 PSSH and PSSH Box 介绍 常见的 DRM 问题 希望这一系列文章，可以帮助大家去慢慢理解 DRM 工作，并且在日常工作中有所实践。 详情 »
最近一直在做 MSE 相关的事情，机缘巧合下碰到了关于 ReadyState 和它有可能触发的事情的研究，于是写下这篇文章作为记录。 前面一篇文章 HTML5 Video 元素 Ready State 分析 分析了 readyState 状态的具体含义，今天则会根据状态和关键事件来进行分析。 VIdeo 关于启动播放，有下面这些事件选择： loadedmetadata: 事件在元数据（metadata）被加载完成后触发 loadeddata: 事件在媒体当前播放位置的视频帧（通常是第一帧）加载完成后触发。 canplay: 事件在终端可以播放媒体文件时（但估计还没有加载足够的数据来播放媒体直到其结束，即后续可能需要停止以进一步缓冲内容）被触发。 canplaythrough: 事件在终端可以播放媒体文件时（估计已经加载了足够的数据来播放媒体直到其结束，而不必停止以进一步缓冲内容）被触发。 我们可以看到事件先后顺序是: loadedmetadata -> loadeddata -> canplay -> canplaythrough 我们再看看 3G 网速下的测试效果: 可以看到还是 loadedmetadata -& 详情 »
最近一直在做 MSE 相关的事情，机缘巧合下碰到了关于 ReadyState 和它有可能触发的事情的研究，于是写下这篇文章作为记录。 Video 元素维持内部几个非常重要的状态，这些都是只读的: paused 属性，你可以直接从 video elment 上读取，当你暂停视频的时候，Video 元素会讲这个属性值改为 true, 这里还有一些别的情况，我会在后面一篇文章分析 readyState 属性，当然你也可以从 Video 元素上读取，不同 readyState 意味着 video 的不同状态。 官方罗列了这些状态值: // video element ready state Enum const unsigned short HAVE_NOTHING = 0; const unsigned short HAVE_METADATA = 1; const unsigned short HAVE_CURRENT_DATA 详情 »
原文链接： https://www.roadtovr.com/understanding-pixel-density-retinal-resolution-and-why-its-important-for-vr-and-ar-headsets/ 虽然我们大多数人习惯于处理描述像素数的分辨率数字（即：1920×1080 显示器），但以每度像素表示的像素密度是一个更有用的数字，尤其是在处理 AR 和 VR 头显时。实现“视网膜分辨率”是耳机的最终目标，在一定的像素密度下，即使是视力完美的人也无法辨别任何额外的细节。本文探讨了这些概念，并了解了当今头戴式设备与视网膜分辨率的差距。 Yuval Boger 的客座文章 Yuval 是Sensics的首席执行官和OSVR的联合创始人。Yuval 和他的团队设计了 OSVR 软件平台并构建了 OSVR 产品的关键部分。他经常在他的博客上分享他的观点和知识。 如果人眼是一台数码相机，它的“数据表”会说它有一个能够在中央凹（视力最高的视网膜部分）检测 60 像素/度的传感器。对于视觉质量，任何超过 60 像素/度的显示器本质上都是在浪费分辨率，因为眼睛无法捕捉到更多细节。这称为视网膜分辨率或眼睛限制分辨率。 这意味着，如果有一张 3,600 详情 »
谷歌在开放 Android 套件的时候也非常方便的把自家的 Youtube 播放相关的前端开源总结了出来，也就是我们经常提到的 ExoPlayer 。这里也顺道说下其他端，如果你是 Web 端，你可以使用 谷歌家的 shaka-player , 如果你是 iOS 的话，你可以使用 AVPlayer 。他们都提供从基础 UI 空间到自适应分辨率的支持。当然你也可以选择其他框架。 创建一个简单的 MP4 播放器 首先我们引入依赖 implementation 'com.google.android.exoplayer:exoplayer:2.11.7' 这里我是直接用的最新的版本 2.11.7 接下来我们需要做一些初始化的工作 val player = SimpleExoPlayer.Builder(context!!).build() exoplayer_view.player = player val dataSourceFactory: DataSource.Factory = DefaultDataSourceFactory( 详情 »
Chrome 最新的版本更新了媒体控制菜单的按钮 UI，也就是每次我们的网页产生声音或者视频时候，菜单栏头像附近，方便我们在多个 Tab 进行控制时候加的，方便我们操作这些网页 Tab 下面的音视频。 尤其最新的样式实现非常酷炫，加入对封面的支持，这样整体效果看着非常棒。 很早之前我们写过一篇关于 使用 mediaSession 实现媒体播放的通知栏控制 这里介绍了我们如何在网页播放音频的时候锁屏控件如何显示当前播放音乐的封面和简介，或者控制上一曲下去。 同意视频播放现在也可以，你只需要监听 MediaSession 的相关事件然后设置 mediaSession MetaData 的信息就好。 设置封面标题 if ('mediaSession' in navigator) { var data = mediaList[index] navigator.mediaSession.metadata = new MediaMetadata({ title: data.title, artist: data.director, artwork: [ { src: data.cover, sizes: '192x192' } ] }); } 进行播放控制 // $video has 详情 »
目前很多视频服务商比如 Bilibili, 优酷, 腾讯等都支持基于 iFrame，将自己上传的视频或者别的作者的视频, 内嵌到自己的网站，从而提升内容或者宣传的质量。记得很早的时候火影忍者中文网就是嵌入的优酷的视频。 IFrame 不仅降低了接入成本，也降低了接入门槛，稍微懂点相关的知识就可以投放到自己的网站。但是这里实际上会存在一种安全警示。 我们知道腾讯视频除了(B站)是有前贴广告的，这么做是为了增加金主爸爸的品牌广告的曝光量。而基于 IFrame 的形式，很容易被一些广告主当做免费的视频托管平台，把自己的一些教程或者宣传该网站金主爸爸广告的视频嵌入到比较吸睛的内容上（赌博，色情等）。 不妨看下下面这张截图： 是不是很多人经常不慎点进去，为了方便大家使用，网站主可能会投一些教程视频，方便大家学习如何充值以及如何参与等。然而这里面的风险点，便是这样的网站对前贴曝光的品牌比如一些金主爸爸的(保洁，苹果，华为等)，实际上是品牌影响的，就像很多人一看这个视频，会觉得是这些品牌在该网站的投放，从而进一步对该网站产生信任或者对该广告品牌产生质疑。 又或者在某些色情网站上，色情网站流量较大经常会嵌入一些游戏的广告链接导流，比如经常看到渣渣辉或者山鸡的传奇游戏广告，这些网站为了宣传游戏的吸引力会投入一些视频做宣传。因此这些色情网站也会嵌入到当前网站中。 然而风险点同样在于前贴广告的曝光，会非常影响这些广告主品牌效应，你想想你在浏览 xxx 网站，刚好你是某品牌的员工，看到自家的广告在这样的网站上播放，可能内心一种无奈在心头，又或者更多问号在头上? 所以我们在做任何开放服务尤其基于 iFrame 做好对 详情 »
各大厂商在媒体播放这块一般管控都比较严格，所以经常会出现一些非常规的行为，比如 iOS 唤出全屏，比如自动播放，比如画中画(PiP) 无法唤起等问题。 在 iOS 中，我们各个 App 引入的 Webview 容器都是官方推荐的 WKWebView ，我们需要它来加载我们的网页，从而完成部分功能。但是处于安全隐私的考虑，它默认的一些属性是并不开启的。其中我们比较关注的视频播放有这么几项： applicationNameForUserAgent 用于设置 WebView user agent allowsInlineMediaPlayback 是使用h5的视频播放器在线播放, 还是使用原生播放器全屏播放 mediaTypesRequiringUserActionForPlayback 允许哪些媒体格式需要用户手动触发播放 allowsAirPlayForMediaPlayback 是否允许 Apple 的 Airplay allowsPictureInPictureMediaPlayback 是否允许 画中画模式(PiP) 在 Swift 中，我们可以简单的初始化一个 webview struct WebView: UIViewRepresentable { let request: URLRequest var config = WKWebViewConfiguration( 详情 »
