在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称:videojs/http-streaming开源软件地址:https://github.com/videojs/http-streaming开源编程语言:JavaScript 98.9%开源软件介绍:videojs-http-streaming (VHS)Play HLS, DASH, and future HTTP streaming protocols with video.js, even where they're not natively supported. Included in video.js 7 by default! See the video.js 7 blog post Maintenance Status: Stable Video.js Compatibility: 6.0, 7.0
InstallationNPMTo install npm install --save @videojs/http-streaming CDNSelect a version of VHS from the CDN ReleasesDownload a release of videojs-http-streaming Manual BuildDownload a copy of this git repository and then follow the steps in Building ContributingSee CONTRIBUTING.md TroubleshootingTalk to usDrop by our slack channel (#playback) on the Video.js slack. Getting StartedThis library is included in video.js 7 by default, if you are using an older version of video.js then get a copy of videojs-http-streaming and include it in your page along with video.js: <video-js id=vid1 width=600 height=300 class="vjs-default-skin" controls>
<source
src="https://example.com/index.m3u8"
type="application/x-mpegURL">
</video-js>
<script src="video.js"></script>
<script src="videojs-http-streaming.min.js"></script>
<script>
var player = videojs('vid1');
player.play();
</script> Check out our live example if you're having trouble. Is it recommended to use the CompatibilityThe Media Source Extensions API is required for http-streaming to play HLS or MPEG-DASH. Browsers which support MSE
These browsers have some level of native HLS support, which will be used unless the overrideNative option is used:
Native only
Mac Safari does have MSE support, but native HLS is recommended Flash SupportThis plugin does not support Flash playback. Instead, it is recommended that users use the videojs-flashls-source-handler plugin as a fallback option for browsers that don't have a native HLS/DASH player or support for Media Source Extensions. DRMDRM is supported through videojs-contrib-eme. In order to use DRM, include the videojs-contrib-eme plug, initialize it, and add options to either the plugin or the source. Detailed option information can be found in the videojs-contrib-eme README. 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. 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-http-streaming supports a bunch of HLS features. Here are some highlights:
For a more complete list of supported and missing features, refer to this doc. 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: {
vhs: {
withCredentials: true
}
}
}); 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);
}
}); parse708captions
When set to overrideNative
Try to use videojs-http-streaming 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 // via the constructor
var player = videojs('playerId', {
html5: {
vhs: {
overrideNative: true
},
nativeAudioTracks: false,
nativeVideoTracks: false
}
}); Since MSE playback may be desirable on all browsers with some native support other than Safari, blacklistDuration
When the maxPlaylistRetries
The max number of times that a playlist will retry loading following an error before being indefinitely excluded from the rendition selection algorithm. Note: the number of retry attempts needs to exceed this value before a playlist will be excluded. bandwidth
When the useBandwidthFromLocalStorage
If true, enableLowInitialPlaylist
When limitRenditionByPlayerDimensions
When useDevicePixelRatio
If true, this will take the device pixel ratio into account when doing rendition switching. This means that if you have a player with the width of smoothQualityChange
smoothQualityChange is deprecated and will be removed in the next major version of VHS. Instead of its prior behavior, smoothQualityChange will now call fastQualityChange, which clears the buffer, chooses a new rendition, and starts loading content from the current playhead position. allowSeeksWithinUnsafeLiveWindow
When This option can help in instances where the live stream's target duration is greater than the segment durations, playback ends up in the unsafe live window, and there are gaps in the content. In this case the player will attempt to seek past the gaps but end up seeking inside of the unsafe range, leading to a correction and seek back into a previously played content. The property defaults to customTagParsers
With customTagMappers
Similar to cacheEncryptionKeys
This option forces the player to cache AES-128 encryption keys internally instead of requesting the key alongside every segment request.
This option defaults to handlePartialData
liveRangeSafeTimeDelta
useNetworkInformationApi
useDtsForTimestampOffset
captionServices
The captionServices options object has properties that map to the caption services. Each property is an object itself that includes several properties, like a label or language. For 608 captions, the service names are For 708 caption services, you may additionally provide an Format{
vhs: {
captionServices: {
[serviceName]: {
language: String, // optional
label: String, // optional
default: boolean, // optional,
encoding: String // optional, 708 services only
}
}
}
} Example{
|
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论