作者：HTML5 之前
在 HTML5 之前，在网络上显示视频需要 浏览器插件 和 Flash。
幸运的是，Firefox OS 支持 HTML5 视频，因此我们无需支持这些旧格式。
网络上的视频支持
尽管现代浏览器支持 HTML5，但它们支持的视频格式各不相同。
总之，要支持大多数浏览器，使用最少的格式，您需要 MP4 和 WebM 视频格式（Firefox 优先使用 WebM）。
多种尺寸
现在您已经了解了可以使用哪些格式，您需要决定视频分辨率，因为使用高速 Wi-Fi 的台式机用户会希望获得比使用 3G 的移动用户更好的质量视频。
在 Rormix，我们决定使用 720p 用于台式机，360p 用于移动连接，以及 180p 特别用于 Firefox OS，以降低数据资费较高的国家/地区的成本。
没有硬性规定 - 这取决于您的目标市场。
流式传输？
最好的流式传输解决方案是根据用户的连接状态自动为用户提供不同尺寸的视频（自适应流式传输），但这种技术的支持 很差。
HTTP 实时流式传输 在 Apple 设备上运行良好，但在 Android 上 支持不佳。
在撰写本文时，最具前景的技术是 MPEG DASH，它是一个国际标准。
总之，我们还需要等待一段时间才能获得被广泛接受的自适应流式传输技术（Firefox 不支持 HLS 或 MPEG DASH）。
DIY 自适应流式传输
在没有自适应流式传输的情况下，我们需要尝试确定在开始时加载的最佳视频质量。以下是一份快速指南，可帮助您做出决定。
Wi-Fi 或 3G
使用 已认证 的 Firefox OS 应用程序，您可以检查用户是否在 Wi-Fi 上。
var lock = navigator.mozSettings.createLock();
var setting = lock.get('wifi.enabled');
setting.onsuccess = function () {
console.log('wifi.enabled: ' + setting.result);
}
setting.onerror = function () {
console.warn('An error occured: ' + setting.error);
}
https://mdn.org.cn/en-US/docs/Web/API/Settings_API
您可以在 W3C 设备 API 上找到更多信息。
检测屏幕尺寸
向屏幕尺寸小于 720p 的用户发送 720p 视频毫无意义。有许多方法可以获取用户屏幕的不同边界；innerWidth 和 width 可以让您获得良好的了解。
function getVidSize()
{
//Get the width of the phone (rotation independent)
var min = Math.min($(window).innerHeight(),$(window).innerWidth());
//Return a video size we have
if(min < 320) return '180';
else if(min < 550) return '360';
else return '720';
}
http://www.quirksmode.org/m/tests/widthtest.html
确定互联网速度
使用 Web 技术很难准确地了解用户的互联网速度 - 通常需要将大型图像加载到用户的设备上并进行计时。这样做的缺点是需要向用户发送更多数据。一些服务，例如：http://speedof.me/api.html 存在，但仍然需要将数据下载到用户的设备上。（Stackoverflow 提供了一些其他选项。）
您可以通过使用 HTML5 更聪明一些，并检查用户开始播放视频到加载一定量的视频之间的时间。这样，我们无需在用户的设备上加载任何额外的数据。以下是一个简短的 VideoJS 示例
var global_speedcount = 0;
var global_video = null;
global_video = videojs("video", {}, function(){
//Set up video sources
});
global_video.on('play',function(){
//User has clicked play
global_speedcount = new Date().getTime();
});
function timer()
{
var diff = new Date().getTime() - global_speedcount;
//Remove this handler as it is run multiple times per second!
global_video.off('timeupdate',timer);
}
global_video.on('timeupdate',timer);
此代码在用户点击播放时开始计时，当浏览器开始播放视频时，它会将计时信息发送到 timeupdate。您也可以使用此函数来检测是否发生了大量缓冲。
检测高分辨率设备
最后要确定的一件事是用户是否拥有高像素密度屏幕。在这种情况下，即使他们的屏幕很小，它仍然可能具有大量的像素（因此需要更高分辨率的视频）。
Modernizr 有一个用于检测高分辨率屏幕的插件。
if (Modernizr.highresdisplay)
{
alert('Your device has a high resolution screen');
}
WebP 缩略图
并非要引发争论，但我们在 Rormix 发现文件大小平均减少了 30%（WebP 与 JPEG），而质量没有损失（在某些情况下减少了 50%）。在数据计划昂贵的国家/地区，数据越少越好。
我们将所有缩略图都编码为多种分辨率的 WebP，并将其发送到支持它们的每台设备，以减少发送到用户的流量。
移动端注意事项
如果您在移动设备上播放 HTML5 视频，它们的行为会有所不同。在 iOS 上，它会在 iPhone/iPod 上自动进入全屏模式，但在平板电脑上则不会。
像 VideoJS 这样的库已 从移动设备中删除了控件，直到它们的稳定性提高。
有用的库
有一些有用的 HTML5 视频库
Mozilla 链接
Mozilla 有关于网络视频的一些很棒的文章
其他有用的链接
关于 Mark Wheeler
Rormix 的首席技术官 - 值得观看的音乐
6 条评论