tech(技术)

播放技术

播放技术是指用于播放视频或音频的特定浏览器或插件技术。使用HTML5时,播放技术是视频或音频元素。当从videojs-flash使用Flash时,播放技术是video-js.swf Flash对象。使用videojs-youtube技术时,播放技术是You Tube播放器。该技术还包括一个API包装器,可在Video.js控件和API之间转换为所使用的特定播放技术。

本质上,我们仅将html5和插件用作视频解码器,并使用HTML和JavaScript在所有这些组件上创建一致的API和外观体验。

除了技术人员,还有源代码处理程序。源代码处理程序增加了向技术人员播放其他源代码类型的功能。例如,videojs-contrib-hls源处理程序使HTML5和Flash技术可以播放HLS。


构建API包装器

我们将在不久的将来编写关于包装器的更完整的指南,但是目前最好的资源是Video.js源,您可以在其中查看如何创建HTML5 API包装器。


所需方法

canPlayType play pause currentTime volume duration buffered supportsFullScreen


必要事件

loadstart play pause playing ended volumechange durationchange error


可选事件

timeupdate progress enterFullScreen exitFullScreen


添加播放技术

添加其他技术后,它们会自动添加到中techOrder。您可以修改techOrder来更改每种技术的优先级。


标记方法:

<video data-setup='{"techOrder": ["html5", "flash", "other supported tech"]}'>


对象方法:

videojs("videoID", {
  techOrder: ["html5", "flash", "other supported tech"]
});


海报

默认情况下,技术人员必须处理自己的海报,并且一定程度上处于播放器海报生命周期之外。但是,使用techCanOverridePoster选项初始化播放器后,技术人员就有可能集成到该生命周期中,并使用播放器的PosterImage组件。

技术人员可以通过检查canOverridePoster选项中的布尔值来检查他们是否具有此功能。

techCanOverridePoster 要求

  • poster() 返回技术人员当前的海报网址
  • setPoster()更新技术人员的海报网址并触发posterchange玩家将处理的事件


技术要求

当给Video.js一个源数组时,通过查找第一个受支持的源/技术组合来决定使用哪个。将按照techOrder中指定的顺序查询每个tech是否可以成为播放第一个源。如果没有tech可以播放第一个源,那么就会检测下一个。正确地设置每个源的类型对于这个测试是非常重要的。

例如,给定以下视频元素,假设videojs-flash技术和videojs-contrib-hls源处理程序可用:

<!-- "techOrder": ["html5", "flash"] -->
<video
  <source src="http://your.static.provider.net/path/to/video.m3u8" type="application/x-mpegURL">
  <source src="http://your.static.provider.net/path/to/video.mp4" type="video/mp4">
</video>
将首先测试HLS源。第一个技术是html5。
  • Safari可以在标准HTML5视频元素中播放HLS,因此将使用html5技术播放HLS
  • Chrome无法单独播放标准HTML5视频元素中的HLS,但videojs-contrib-hls源处理程序可以通过HTML5中的Media Source Extensions播放HLS 。因此,HLS将在html5技术中播放
  • IE 10无法原生播放HLS,并且不支持媒体源扩展。由于无法在HTML5中播放源,因此可以测试Flash技术。videojs-contrib-hls源处理程序可以在Flash技术中播放HLS,因此HLS将在Flash技术中播放。
现在,使用videojs-contrib-hls再次获取相同的资源,但不使用videojs-flash:
<!-- "techOrder": ["html5"] -->
<video
  <source src="http://your.static.provider.net/path/to/video.m3u8" type="application/x-mpegURL">
  <source src="http://your.static.provider.net/path/to/video.mp4" type="video/mp4">
</video>
  • Safari将在html5技术中播放HLS
  • Chrome将通过videojs-contrib-hls在html5技术中播放HLS
  • IE 10无法使用html5或Flash技术播放HLS。接下来,将测试MP4源。HTML5可以播放MP4,因此将使用源技术对。
这次,我们有videojs-flash,但没有videojs-contrib-hls:
<!-- "techOrder": ["html5", "flash"] -->
<video
  <source src="http://your.static.provider.net/path/to/video.m3u8" type="application/x-mpegURL">
  <source src="http://your.static.provider.net/path/to/video.mp4" type="video/mp4">
</video>
  • Safari将在html5技术中播放HLS
  • Chrome无法在html5或Flash技术中播放HLS,因此将在html5技术中播放MP4。
  • IE 10也无法在html5或Flash技术中播放HLS,也将在html5技术中播放MP4。


闪存技术

Flash播放技术以前包含在Video.js核心中,并且包含在默认值中techOrder。从版本6开始,Flash技术已移至单独的videojs-flash插件,如果仍然需要使用Flash,则需要包括该插件。
最终用户越来越没有Flash或浏览器已禁用Flash或为使用它设置了点击播放或其他障碍,因此强烈建议使用HLS之类的替代方法。


启用RTMP流播放

为了强制Flash技术选择流播放,您需要在其他有效的Flash视频源之前提供有效的流源。由于源选择算法的缘故,这是必需的,其中播放技术会选择具有有效类型的第一个可能的源对象。有效的流传输type值包括rtmp/mp4和rtmp/flv。流src值需要有效的连接和流字符串,以分隔&。通过HTML标记提供流式源的示例可能类似于:

<source src="rtmp://your.streaming.provider.net/cfx/st/&mp4:path/to/video.mp4" type="rtmp/mp4">
<source src="http://your.static.provider.net/path/to/video.mp4" type="video/mp4">
<source src="http://your.static.provider.net/path/to/video.webm" type="video/webm">
您可以选择使用last /作为连接字符串和流字符串之间的分隔符,例如:
<source src="rtmp://your.streaming.provider.net/cfx/st/mp4:video.mp4" type="rtmp/mp4">
所有四种RTMP协议在src(RTMP,RTMPT,RTMPE和RTMPS)中均有效。

有关沙盒和安全性的说明

在某些环境中,例如Electron和NW.js应用程序,将执行更严格的策略,并且.swf文件将无法与外界进行即时通信。要流媒体,您必须将它们添加到受信任文件的特殊清单中。nw-flash-trust使这项工作变得容易。
当您从文件系统(使用file:协议)以及沙盒iframe中加载页面时,浏览器还会阻止Flash技术正常工作。



上一篇:skins(皮肤) 下一篇:text-tracks