查看详情

HDCP 介绍以及在 Web 的应用

HDCP（High-Definition Content Protection）是数字内容保护的一种方案，旨在保护数字视频内容在从设备传输到显示器或投影仪的途中不被非法复制。它由英特尔开发，并已成为高清数字内容传输的行业标准。 HDCP 的工作原理 HDCP 使用一对加密密钥来保护数字内容。第一个密钥由源设备（例如蓝光播放器或计算机）生成，第二个密钥由显示器或投影仪生成。当源设备将视频信号发送到显示器或投影仪时，它会使用第一个密钥对信号进行加密。显示器或投影仪使用第二个密钥来解密信号。如果缺少正确的密钥，则无法解密信号，因此无法复制内容。 HDCP 兼容设备拥有自己独特的加密密钥集，当尝试将受 HDCP 保护的内容从一台设备传输到另一台设备时，它们会相互交换这些密钥。这些加密密钥既可以确认每台设备都符合 HDCP 标准，又可用于在传输内容时对其进行加密，然后在另一端解密。这可以防止中间人攻击在传输过程中窃取未受保护的媒体。 现代显示器理所当然地都支持 HDCP，因此您最有可能遇到与推出时不支持 HDCP 的旧高清电视的兼容性问题。如果您使用不支持 HDCP 的电缆或分线器，即使显示器本身支持 HDCP，也会出现这种情况。 虽然 HDCP 最常用于蓝光光盘等物理媒体，但它也用于一些流媒体服务。例如，迪士尼和华纳兄弟使用 HDCP 来加密和保护几乎所有自己的节目，因此如果您在流媒体服务（尤其是他们的第一方服务）上遇到它们， 详情 »

查看详情

常见的流媒体 DRM 方案

前一篇什么是 DRM详细说明了 DRM 大概做什么。今天将会罗列常见的流媒体的 DRM 方案。我们目前主流是: Widevine PlayReady FairPlay 这些都是大厂背书的解决方案，这背后也是意味着他们各家的产品线都会上自家的方案。因此如果你做多媒体工作，肯定因为这么多套解决方案的适配感到烦恼。 Widevine Widevine 是谷歌公司收购而来的。常见的 Chrome 浏览器，或者 Android 上我们都能看到他们的身影。而且非常重要的一点，它是免费的，因此很多厂商都会选择它。 Widevine 实现视频加密，主要有下面几个重要步骤: 内容加密： 内容提供商首先使用 Widevine 的加密密钥对视频内容进行加密。这会使视频流变得无法观看，除非拥有正确的解密密钥。 设备授权： 用户设备必须经过 Widevine 认证才能播放受保护的内容。这通常涉及在设备上安装 Widevine 的客户端软件并注册 Google 帐户。 密钥交付： 当用户尝试观看受保护的内容时，他们的设备会向 Google 的许可服务器请求解密密钥。如果设备经过授权，服务器会提供密钥。 内容解密： 设备使用解密密钥来解密视频流。这使视频可以播放到用户的设备上 Widevine 详情 »

查看详情

实现类似 Medium 风格的视频加载

非常早之前写过关于一篇《[译]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

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 系列

准备开始写一系列关于 DRM。由于自己主要从事流媒体工作，这里也以流媒体的内容为主。 这里大概会写几篇，代码部分会聚焦在 Web 端的内容处理。自己最近一直在从事这方面的工作，因此也希望罗列整理一些资料，分享自己在这方面的一些心得。 DRM 目前已经存在于绝大多数的服务 APP 中。最直观的体验，就是你可以尝试看一些来自 Disney 等电影公司的电影，时候你可以尝试截图试一下： 我们可以从 Bilibili 网站点击进去，发现截图的时候是黑屏。这样也是为了防止录屏将视频流出去。尽管我们有 DRM 保护技术，但是还是依旧存在严重的流媒体盗版事件。因此DRM发展依旧有很长的路。 这一些列文章，自己将从下面几个部分区介绍: 什么是 DRM 常见的流媒体DRM 方案 Web 前端如何支持 DRM 深入理解 Widevine HDCP介绍 常见的 DRM 问题 希望这一系列文章，可以帮助大家去慢慢理解 DRM 工作，并且在日常工作中有所实践。 详情 »

查看详情

loadedData,loadedMetadata,canplay 什么时候播放最好

最近一直在做 MSE 相关的事情，机缘巧合下碰到了关于 ReadyState 和它有可能触发的事情的研究，于是写下这篇文章作为记录。 前面一篇文章 HTML5 Video 元素 Ready State 分析 分析了 readyState 状态的具体含义，今天则会根据状态和关键事件来进行分析。 VIdeo 关于启动播放，有下面这些事件选择： loadedmetadata: 事件在元数据（metadata）被加载完成后触发 loadeddata: 事件在媒体当前播放位置的视频帧（通常是第一帧）加载完成后触发。 canplay: 事件在终端可以播放媒体文件时（但估计还没有加载足够的数据来播放媒体直到其结束，即后续可能需要停止以进一步缓冲内容）被触发。 canplaythrough: 事件在终端可以播放媒体文件时（估计已经加载了足够的数据来播放媒体直到其结束，而不必停止以进一步缓冲内容）被触发。 我们可以看到事件先后顺序是: loadedmetadata -> loadeddata -> canplay -> canplaythrough 我们再看看 3G 网速下的测试效果: 可以看到还是 loadedmetadata -& 详情 »

查看详情

HTML5 Video 元素 Ready State 分析

最近一直在做 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 详情 »

查看详情

【译】了解像素密度和视网膜分辨率，以及为什么它对 AR/VR 头显很重要

原文链接： 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 EXOPlayer 创建视频播放器

谷歌在开放 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( 详情 »

查看详情

如何实现 Bilibili 视频播放Chrome 媒体控制效果

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