客服电话
APP下载
迪恩网络APP
随时随地掌握行业动态
官方微信
扫描二维码
关注迪恩网络微信公众号
开源软件名称（OpenSource Name）：videojs/videojs-contrib-hls开源软件地址(OpenSource Url)：https://github.com/videojs/videojs-contrib-hls开源编程语言(OpenSource Language)：JavaScript 99.7%开源软件介绍(OpenSource Introduction)：Notice: this project will be deprecated and is succeeded by videojs-http-streaming. VHS supports HLS and DASH and is built into video.js 7, see the video.js 7 blog postvideo.js HLS Source Handler
Play back HLS with video.js, even where it's not natively supported. Maintenance Status: Deprecated Table of Contents generated with DocToc
InstallationNPMTo install npm install --save videojs-contrib-hlsCDNSelect a version of HLS from cdnjs or jsDelivr ReleasesDownload a release of videojs-contrib-hls Manual BuildDownload a copy of this git repository and then follow the steps in Building ContributingSee CONTRIBUTING.md Talk to usDrop by our slack channel (#playback) on the Video.js slack. Getting StartedGet a copy of videojs-contrib-hls and include it in your page along with video.js: <video id=example-video width=600 height=300 class="video-js vjs-default-skin" controls>
<source
src="https://example.com/index.m3u8"
type="application/x-mpegURL">
</video>
<script src="video.js"></script>
<script src="videojs-contrib-hls.min.js"></script>
<script>
var player = videojs('example-video');
player.play();
</script>Check out our live example if you're having trouble. Video.js 6With Video.js 6, by default there is no flash support. Instead, flash support is provided through the videojs-flash plugin. If you are trying to use Video.js version 6 and want to include flash support, you must include videojs-flash on your page before including videojs-contrib-hls <script src="https://unpkg.com/videojs-flash/dist/videojs-flash.js"></script>
<script src="https://unpkg.com/videojs-contrib-hls/dist/videojs-contrib-hls.js"></script>Flash, and the videojs-flash plugin, are not required, but are recommended as a fallback option for browsers that don't have a native HLS player or support for Media Source Extensions. DocumentationHTTP Live Streaming (HLS) has become a de-facto standard for streaming video on mobile devices thanks to its native support on iOS and Android. There are a number of reasons independent of platform to recommend the format, though:
Unfortunately, all the major desktop browsers except for Safari are missing HLS support. That leaves web developers in the unfortunate position of having to maintain alternate renditions of the same video and potentially having to forego HTML-based video entirely to provide the best desktop viewing experience. This project addresses that situation by providing a polyfill for HLS on browsers that have support for Media Source Extensions, or failing that, support Flash. You can deploy a single HLS stream, code against the regular HTML5 video APIs, and create a fast, high-quality video experience across all the big web device categories. Check out the full documentation for details on how HLS works and advanced configuration. A description of the adaptive switching behavior is available, too. videojs-contrib-hls supports a bunch of HLS features. Here are some highlights:
OptionsHow to useInitializationYou may pass in an options object to the hls source handler at player initialization. You can pass in options just like you would for other parts of video.js: // html5 for html hls
videojs(video, {html5: {
hls: {
withCredentials: true
}
}});
// or
// flash for flash hls
videojs(video, {flash: {
hls: {
withCredentials: true
}
}});
// or
var options = {hls: {
withCredentials: true
}};
videojs(video, {flash: options, html5: options});SourceSome options, such as var player = videojs('some-video-id');
player.src({
src: 'https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8',
type: 'application/x-mpegURL',
withCredentials: true
});ListwithCredentials
When the handleManifestRedirects
When the useCueTags
When the let textTracks = player.textTracks();
let cuesTrack;
for (let i = 0; i < textTracks.length; i++) {
if (textTracks[i].label === 'ad-cues') {
cuesTrack = textTracks[i];
}
}
cuesTrack.addEventListener('cuechange', function() {
let activeCues = cuesTrack.activeCues;
for (let i = 0; i < activeCues.length; i++) {
let activeCue = activeCues[i];
console.log('Cue runs from ' + activeCue.startTime +
' to ' + activeCue.endTime);
}
});overrideNative
Try to use videojs-contrib-hls even on platforms that provide some
level of HLS support natively. There are a number of platforms that
technically play back HLS content but aren't very reliable or are
missing features like CEA-608 captions support. When NOTE: If you use this option, you must also set
blacklistDuration
When the bandwidth
When the enableLowInitialPlaylist
When Runtime PropertiesRuntime properties are attached to the tech object when HLS is in use. You can get a reference to the HLS source handler like this: var hls = player.tech({ IWillNotUseThisInPlugins: true }).hls;If you were thinking about modifying runtime properties in a video.js plugin, we'd recommend you avoid it. Your plugin won't work with videos that don't use videojs-contrib-hls and the best plugins work across all the media types that video.js supports. If you're deploying videojs-contrib-hls on your own website and want to make a couple tweaks though, go for it! hls.playlists.masterType: An object representing the parsed master playlist. If a media playlist is loaded directly, a master playlist with only one entry will be created. hls.playlists.mediaType: A function that can be used to retrieve or modify the currently active media playlist. The active media playlist is referred to when additional video data needs to be downloaded. Calling this function with no arguments returns the parsed playlist object for the active media playlist. Calling this function with a playlist object from the master playlist or a URI string as specified in the master playlist will kick off an asynchronous load of the specified media playlist. Once it has been retreived, it will become the active media playlist. hls.segmentXhrTimeType: The number of milliseconds it took to download the last media segment. This value is updated after each segment download completes. hls.bandwidthType: The number of bits downloaded per second in the last segment download.
This value is used by the default implementation of Before the first video segment has been downloaded, it's hard to estimate bandwidth accurately. The HLS tech uses a heuristic based on the playlist download times to do this estimation by default. If you have a more accurate source of bandwidth information, you can override this value as soon as the HLS tech has loaded to provide an initial bandwidth estimate. hls.bytesReceivedType: The total number of content bytes downloaded by the HLS tech. hls.selectPlaylistType: A function that returns the media playlist object to use to download
the next segment. It is invoked by the tech immediately before a new
segment is downloaded. You can override this function to provide your
adaptive streaming logic. You must, however, be sure to return a valid
media playlist object that is present in Overridding this function with your own is very powerful but is overkill for many purposes. Most of the time, you should use the much simpler function below to selectively enable or disable a playlist from the adaptive streaming logic. hls.representationsType: It is recommended to include the videojs-contrib-quality-levels plugin to your page so that videojs-contrib-hls will automatically populate the QualityLevelList exposed on the player by the plugin. You can access this list by calling Example, only enabling representations with a width greater than or equal to 720: var qualityLevels = player.qualityLevels();
for (var i = 0; i < qualityLevels.length; i++) {
var quality = qualityLevels[i];
if (quality.width >= 720) {
quality.enabled = true;
} else {
quality.enabled = false;
}
}If including videojs-contrib-quality-levels is not an option, you can use the representations api. To get all of the available representations, call the player.hls.representations();To see whether the representation is enabled or disabled, call its Example, only enabling representations with a width greater than or equal to 720: player.hls.representations().forEach(function(rep) {
if (rep.width >= 720) {
rep.enabled(true);
} else {
rep.enabled(false);
}
});hls.xhrType: The xhr function that is used by HLS internally is exposed on the per-
player Example: player.hls.xhr.beforeRequest = function(options) {
options.uri = options.uri.replace('example.com', 'foo.com');
return options;
};The global Example videojs.Hls.xhr.beforeRequest = function(options) {
/*
* Modifications to requests that will affect every player.
*/
return options;
};
var player = videojs('video-player-id');
player.ready(function() {
this.src({
src: 'https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8',
type: 'application/x-mpegURL',
});
});For information on the type of options that you can modify see the documentation at https://github.com/Raynos/xhr. EventsStandard HTML video events are handled by video.js automatically and are triggered on the player object. loadedmetadataFired after the first segment is downloaded for a playlist. This will not happen
until playback if video.js's HLS Usage EventsUsage tracking events are fired when we detect a certain HLS feature, encoding setting, or API is used. These can be helpful for analytics, and to pinpoint the cause of HLS errors. For instance, if errors are being fired in tandem with a usage event indicating that the player was playing an AES encrypted stream, then we have a possible avenue to explore when debugging the error. Note that although these usage events are listed below, they may change at any time without a major version change. HLS usage events are triggered on the tech with the exception of the 3 hls-reload-error events, which are triggered on the player. Presence StatsEach of the following usage events are fired once per source if (and when) detected:
全部评论
专题导读
上一篇：jimdoescode/CodeIgniter-Dropbox-API-Library: This library is written for the Cod ...发布时间：2022-08-15下一篇：tokio-rs/mio: Metal IO library for Rust发布时间：2022-08-15热门推荐
热门话题
 阅读排行榜
|
请发表评论