• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

videojs/http-streaming: HLS, DASH, and future HTTP streaming protocols library f ...

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称:

videojs/http-streaming

开源软件地址:

https://github.com/videojs/http-streaming

开源编程语言:

JavaScript 98.9%

开源软件介绍:

VHS Logo consisting of a VHS tape, the Video.js logo and the words VHS

videojs-http-streaming (VHS)

Build Status Slack Status Greenkeeper badge

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

Installation

NPM

To install videojs-http-streaming with npm run

npm install --save @videojs/http-streaming

CDN

Select a version of VHS from the CDN

Releases

Download a release of videojs-http-streaming

Manual Build

Download a copy of this git repository and then follow the steps in Building

Contributing

See CONTRIBUTING.md

Troubleshooting

See our troubleshooting guide

Talk to us

Drop by our slack channel (#playback) on the Video.js slack.

Getting Started

This 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 <video-js> element or load a source with player.src(sourceObject) in order to prevent the video element from playing the source natively where HLS is supported.

Compatibility

The Media Source Extensions API is required for http-streaming to play HLS or MPEG-DASH.

Browsers which support MSE

  • Chrome
  • Firefox
  • Internet Explorer 11 Windows 10 or 8.1

These browsers have some level of native HLS support, which will be used unless the overrideNative option is used:

  • Chrome Android
  • Firefox Android
  • Edge

Native only

  • Mac Safari
  • iOS Safari

Mac Safari does have MSE support, but native HLS is recommended

Flash Support

This 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.

DRM

DRM 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.

Documentation

HTTP 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:

  • Supports (client-driven) adaptive bitrate selection
  • Delivered over standard HTTP ports
  • Simple, text-based manifest format
  • No proprietary streaming servers required

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:

  • video-on-demand and live playback modes
  • backup or redundant streams
  • mid-segment quality switching
  • AES-128 segment encryption
  • CEA-608 captions are automatically translated into standard HTML5 caption text tracks
  • In-Manifest WebVTT subtitles are automatically translated into standard HTML5 subtitle tracks
  • Timed ID3 Metadata is automatically translated into HTML5 metedata text tracks
  • Highly customizable adaptive bitrate selection
  • Automatic bandwidth tracking
  • Cross-domain credentials support with CORS
  • Tight integration with video.js and a philosophy of exposing as much as possible with standard HTML APIs
  • Stream with multiple audio tracks and switching to those audio tracks (see the docs folder) for info
  • Media content in fragmented MP4s instead of the MPEG2-TS container format.

For a more complete list of supported and missing features, refer to this doc.

Options

How to use

Initialization

You 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
    }
  }
});
Source

Some options, such as withCredentials can be passed in to vhs during player.src

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
});

List

withCredentials
  • Type: boolean
  • can be used as a source option
  • can be used as an initialization option

When the withCredentials property is set to true, all XHR requests for manifests and segments would have withCredentials set to true as well. This enables storing and passing cookies from the server that the manifests and segments live on. This has some implications on CORS because when set, the Access-Control-Allow-Origin header cannot be set to *, also, the response headers require the addition of Access-Control-Allow-Credentials header which is set to true. See html5rocks's article for more info.

handleManifestRedirects
  • Type: boolean
  • Default: false
  • can be used as a source option
  • can be used as an initialization option

When the handleManifestRedirects property is set to true, manifest requests which are redirected will have their URL updated to the new URL for future requests.

useCueTags
  • Type: boolean
  • can be used as an initialization option

When the useCueTags property is set to true, a text track is created with label 'ad-cues' and kind 'metadata'. The track is then added to player.textTracks(). Changes in active cue may be tracked by following the Video.js cue points API for text tracks. For example:

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
  • Type: boolean
  • Default: true
  • can be used as an initialization option

When set to false, 708 captions in the stream are not parsed and will not show up in text track lists or the captions menu.

overrideNative
  • Type: boolean
  • can be used as an initialization option

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 overrideNative is true, if the platform supports Media Source Extensions videojs-http-streaming will take over HLS playback to provide a more consistent experience.

// 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, overrideNative: !videojs.browser.IS_SAFARI could be used.

blacklistDuration
  • Type: number
  • can be used as an initialization option

When the blacklistDuration property is set to a time duration in seconds, if a playlist is blacklisted, it will be blacklisted for a period of that customized duration. This enables the blacklist duration to be configured by the user.

maxPlaylistRetries
  • Type: number
  • Default: Infinity
  • can be used as an initialization option

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
  • Type: number
  • can be used as an initialization option

When the bandwidth property is set (bits per second), it will be used in the calculation for initial playlist selection, before more bandwidth information is seen by the player.

useBandwidthFromLocalStorage
  • Type: boolean
  • can be used as an initialization option

If true, bandwidth and throughput values are stored in and retrieved from local storage on startup (for initial rendition selection). This setting is false by default.

enableLowInitialPlaylist
  • Type: boolean
  • can be used as an initialization option

When enableLowInitialPlaylist is set to true, it will be used to select the lowest bitrate playlist initially. This helps to decrease playback start time. This setting is false by default.

limitRenditionByPlayerDimensions
  • Type: boolean
  • can be used as an initialization option

When limitRenditionByPlayerDimensions is set to true, rendition selection logic will take into account the player size and rendition resolutions when making a decision. This setting is true by default.

useDevicePixelRatio
  • Type: boolean
  • can be used as an initialization option.

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 540px in a high density display with a device pixel ratio of 2, a rendition of 1080p will be allowed. This setting is false by default.

smoothQualityChange
  • NOTE: DEPRECATED
  • Type: boolean
  • can be used as a source option
  • can be used as an initialization option

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
  • Type: boolean
  • can be used as a source option

When allowSeeksWithinUnsafeLiveWindow is set to true, if the active playlist is live and a seek is made to a time between the safe live point (end of manifest minus three times the target duration, see the hls spec for details) and the end of the playlist, the seek is allowed, rather than corrected to the safe live point.

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 false.

customTagParsers
  • Type: Array
  • can be used as a source option

With customTagParsers you can pass an array of custom m3u8 tag parser objects. See https://github.com/videojs/m3u8-parser#custom-parsers

customTagMappers
  • Type: Array
  • can be used as a source option

Similar to customTagParsers, with customTagMappers you can pass an array of custom m3u8 tag mapper objects. See https://github.com/videojs/m3u8-parser#custom-parsers

cacheEncryptionKeys
  • Type: boolean
  • can be used as a source option
  • can be used as an initialization option

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 false.

handlePartialData
  • Type: boolean,
  • Default: false
  • Use partial appends in the transmuxer and segment loader
liveRangeSafeTimeDelta
  • Type: number,
  • Default: SAFE_TIME_DELTA
  • Allow to re-define length (in seconds) of time delta when you compare current time and the end of the buffered range.
useNetworkInformationApi
  • Type: boolean,
  • Default: false
  • Use window.networkInformation.downlink to estimate the network's bandwidth. Per mdn, The value is never greater than 10 Mbps, as a non-standard anti-fingerprinting measure. Given this, if bandwidth estimates from both the player and networkInfo are >= 10 Mbps, the player will use the larger of the two values as its bandwidth estimate.
useDtsForTimestampOffset
  • Type: boolean,
  • Default: false
  • Use Decode Timestamp instead of Presentation Timestamp for timestampOffset calculation. This option was introduced to align with DTS-based browsers. This option affects only transmuxed data (eg: transport stream). For more info please check the following issue.
captionServices
  • Type: object
  • Default: undefined
  • Provide extra information, like a label or a language, for instream (608 and 708) captions.

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 CC1, CC2, CC3, and CC4. For 708 captions, the service names are SERVICEn where n is a digit between 1 and 63.

For 708 caption services, you may additionally provide an encoding value that will be used by the transmuxer to decode the captions using an instance of TextDecoder. This is to permit and is required for legacy multi-byte encodings. Please review the TextDecoder documentation for accepted encoding labels.

Format
{
  vhs: {
    captionServices: {
      [serviceName]: {
        language: String, // optional
        label: String, // optional
        default: boolean, // optional,
        encoding: String // optional, 708 services only
      }
    }
  }
}
Example
{
  
                      

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap