Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

HLS Basic Playback #748

Merged
merged 6 commits into from
Sep 20, 2013
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
66 changes: 66 additions & 0 deletions docs/guide/HLS.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
HLS
============
Thank you for using the beta version of HLS implementation in VideoJS. We have tried to make the usage of .m3u8 files similar to those of any other accepted technologies. As such, using HLS can be done via both the HTML <source> tag as well as setting the programmatic player.src setting.

Usage Notes
-----------
1. The accepted mimetype is "application/mpegURL".
2. The only accepted file extension is ".m3u8".
3. Bandwidth for adaptive behavior must be greater than 1.1 x rendition bandwidth value to account for switching overhead.
4. Serving domain MUST have a valid crossdomain.xml file as this is a Flash Player requirement to make GET requests for segments.

Currently Supported M3U8 Tags
-----------
1. #EXTM3U
2. #EXTINF
3. #EXT-X-TARGETDURATION
4. #EXT-X-MEDIA-SEQUENCE
5. #EXT-X-PLAYLIST-TYPE
6. #EXT-X-ENDLIST
7. #EXT-X-STREAM-INF

Tags Currently Ignored
-----------
1. #EXT-T-VERSION
2. #EXT-T-I-FRAME-STREAM-INF
3. #EXT-T-I-FRAMES-ONLY
4. #EXT-T-DISCONTINUITY
5. #EXT-T-MEDIA
6. #EXT-T-ALLOW-CACHE
7. #EXT-T-PROGRAM-DATE-TIME
8. #EXT-T-KEY
9. #EXT-T-BYTERANGE

Draft Specification
-----------
For reference, see draft-pantos-http-live-streaming-11

Known Issues
-----------
1. There is a known seeking issue where the player will seek to the beginning of the segment responsible for the seek time requested. We are aware of this issue and are working to resolve.
2. Currently adaptive behavior is based entirely on bandwidth being detected and averaged over 3 non-cached segments. Future iteration will include logic for including viewport dimensions to help refine 'appropriate' indexes.

To implement via VideoJS API:

```javascript
var myPlayer = videojs("example_video_1");
myPlayer.src({src:"http://route/to/my_m3u8_url.m3u8", type: "application/mpegURL"});
```

To implement via HTML Tag:

```html
<video id="vid1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="264"
poster="http://video-js.zencoder.com/oceans-clip.png"
data-setup='{}'>
<source src="http://route/to/my_m3u8_url.m3u8" type='application/mpegURL'>
<track kind="captions" src="../build/demo-files/demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->
<p>Video Playback Not Supported</p>
</video>
```

API Methods
-----------
For HLS API methods, please see the documentation in the video-js-swf repository under docs/hls_api.md.


26 changes: 26 additions & 0 deletions sandbox/hls.html.example
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Video.js Sandbox</title>

<link href="../build/files/video-js.css" rel="stylesheet" type="text/css">

<!-- LOAD VIDEO.JS SOURCE FILES IN ORDER -->
<script src="../build/source-loader.js"></script>

<!-- Set the location of the flash SWF -->
<script>
vjs.options.flash.swf = '../src/swf/video-js.swf';
</script>

</head>
<body>
<p style="background-color:#eee; border: 1px solid #777; padding: 10px; font-size: .8em; line-height: 1.5em; font-family: Verdana, sans-serif;">You can use /sandbox/ for writing and testing your own code. Nothing in /sandbox/ will get checked into the repo, except files that end in .example, so please don't edit or add those files. To get started make a copy of index.html.example and rename it to index.html.</p>

<video id="vid1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="264" poster="http://video-js.zencoder.com/oceans-clip.png" data-setup='{}'>
<source src="http://c.brightcove.com/services/mobile/streaming/index/master.m3u8?videoId=1824650741001" type='application/x-mpegURL'>
<p>Video Playback Not Supported</p>
</video>
</body>
</html>
3 changes: 2 additions & 1 deletion src/js/media/flash.js
Original file line number Diff line number Diff line change
Expand Up @@ -335,7 +335,8 @@ vjs.Flash.formats = {
'video/flv': 'FLV',
'video/x-flv': 'FLV',
'video/mp4': 'MP4',
'video/m4v': 'MP4'
'video/m4v': 'MP4',
'application/x-mpegURL': 'MP4'
};

vjs.Flash.streamingFormats = {
Expand Down
Binary file modified src/swf/video-js.swf
Binary file not shown.