Skip to content
Toggle navigation
Toggle navigation
This project
Loading...
Sign in
brainfood
/
videojs-contrib-hls
Go to a project
Toggle navigation
Toggle navigation pinning
Projects
Groups
Snippets
Help
Project
Activity
Repository
Graphs
Network
Create a new issue
Commits
Issue Boards
Files
Commits
Network
Compare
Branches
Tags
e13e2ae8
authored
2014-05-07 18:29:10 -0400
by
Gary Katsevman
Browse Files
Options
Browse Files
Tag
Download
Email Patches
Plain Diff
initial plugin->tech conversion
1 parent
fafd0563
Hide whitespace changes
Inline
Side-by-side
Showing
11 changed files
with
186 additions
and
166 deletions
example.html
src/aac-stream.js
src/bin-utils.js
src/exp-golomb.js
src/flv-tag.js
src/h264-stream.js
src/m3u8/m3u8-parser.js
src/playlist-loader.js
src/segment-parser.js
src/stream.js
src/videojs-hls.js
example.html
View file @
e13e2ae
...
...
@@ -7,7 +7,7 @@
<link
href=
"node_modules/video.js/dist/video-js/video-js.css"
rel=
"stylesheet"
>
<!-- video.js -->
<script
src=
"node_modules/video.js/dist/video-js/video.js"
></script>
<script
src=
"node_modules/video.js/dist/video-js/video.
dev.
js"
></script>
<!-- Media Sources plugin -->
<script
src=
"node_modules/videojs-contrib-media-sources/src/videojs-media-sources.js"
></script>
...
...
@@ -31,7 +31,7 @@
<!-- bipbop -->
<!-- <script src="test/tsSegment.js"></script> -->
<!-- bunnies -->
<
script
src=
"test/tsSegment-bc.js"
></script
>
<
!--<script src="test/tsSegment-bc.js"></script>--
>
<style>
body
{
...
...
@@ -63,10 +63,12 @@
<script>
videojs
.
options
.
flash
.
swf
=
'node_modules/video.js/dist/video-js/video-js.swf'
;
// initialize the player
var
player
=
videojs
(
'video'
);
var
player
=
videojs
(
'video'
,
{
techOrder
:
[
'hls'
]
});
// initialize the plugin
player
.
hls
();
//player.hls()
</script>
</body>
</html>
...
...
src/aac-stream.js
View file @
e13e2ae
...
...
@@ -8,7 +8,7 @@
(
function
(
window
)
{
var
FlvTag
=
window
.
videojs
.
h
ls
.
FlvTag
,
FlvTag
=
window
.
videojs
.
H
ls
.
FlvTag
,
adtsSampleingRates
=
[
96000
,
88200
,
64000
,
48000
,
...
...
@@ -17,7 +17,7 @@ var
16000
,
12000
];
window
.
videojs
.
h
ls
.
AacStream
=
function
()
{
window
.
videojs
.
H
ls
.
AacStream
=
function
()
{
var
next_pts
,
// :uint
pts_offset
,
// :int
...
...
src/bin-utils.js
View file @
e13e2ae
...
...
@@ -29,5 +29,5 @@
}
};
window
.
videojs
.
h
ls
.
utils
=
module
;
window
.
videojs
.
H
ls
.
utils
=
module
;
})(
this
);
...
...
src/exp-golomb.js
View file @
e13e2ae
...
...
@@ -4,7 +4,7 @@
* Parser for exponential Golomb codes, a variable-bitwidth number encoding
* scheme used by h264.
*/
window
.
videojs
.
h
ls
.
ExpGolomb
=
function
(
workingData
)
{
window
.
videojs
.
H
ls
.
ExpGolomb
=
function
(
workingData
)
{
var
// the number of bytes left to examine in workingData
workingBytesAvailable
=
workingData
.
byteLength
,
...
...
src/flv-tag.js
View file @
e13e2ae
(
function
(
window
)
{
window
.
videojs
=
window
.
videojs
||
{};
window
.
videojs
.
hls
=
window
.
videojs
.
h
ls
||
{};
window
.
videojs
.
Hls
=
window
.
videojs
.
H
ls
||
{};
var
hls
=
window
.
videojs
.
h
ls
;
var
hls
=
window
.
videojs
.
H
ls
;
// (type:uint, extraData:Boolean = false) extends ByteArray
hls
.
FlvTag
=
function
(
type
,
extraData
)
{
...
...
src/h264-stream.js
View file @
e13e2ae
...
...
@@ -8,8 +8,8 @@
(
function
(
window
)
{
var
ExpGolomb
=
window
.
videojs
.
h
ls
.
ExpGolomb
,
FlvTag
=
window
.
videojs
.
h
ls
.
FlvTag
,
ExpGolomb
=
window
.
videojs
.
H
ls
.
ExpGolomb
,
FlvTag
=
window
.
videojs
.
H
ls
.
FlvTag
,
H264ExtraData
=
function
()
{
this
.
sps
=
[];
// :Array
...
...
@@ -234,7 +234,7 @@
* an h264 stream. Exactly one byte.
*/
// incomplete, see Table 7.1 of ITU-T H.264 for 12-32
window
.
videojs
.
h
ls
.
NALUnitType
=
NALUnitType
=
{
window
.
videojs
.
H
ls
.
NALUnitType
=
NALUnitType
=
{
unspecified
:
0
,
slice_layer_without_partitioning_rbsp_non_idr
:
1
,
slice_data_partition_a_layer_rbsp
:
2
,
...
...
@@ -249,7 +249,7 @@
end_of_stream_rbsp
:
11
};
window
.
videojs
.
h
ls
.
H264Stream
=
function
()
{
window
.
videojs
.
H
ls
.
H264Stream
=
function
()
{
var
next_pts
,
// :uint;
next_dts
,
// :uint;
...
...
src/m3u8/m3u8-parser.js
View file @
e13e2ae
...
...
@@ -32,7 +32,7 @@
}
return
result
;
},
Stream
=
videojs
.
h
ls
.
Stream
,
Stream
=
videojs
.
H
ls
.
Stream
,
LineStream
,
ParseStream
,
Parser
;
...
...
src/playlist-loader.js
View file @
e13e2ae
...
...
@@ -5,8 +5,8 @@
(
function
(
window
,
videojs
)
{
'use strict'
;
var
resolveUrl
=
videojs
.
h
ls
.
resolveUrl
,
xhr
=
videojs
.
h
ls
.
xhr
,
resolveUrl
=
videojs
.
H
ls
.
resolveUrl
,
xhr
=
videojs
.
H
ls
.
xhr
,
/**
* Returns a new master playlist that is the result of merging an
...
...
@@ -231,7 +231,7 @@
return
loader
.
trigger
(
'loadedmetadata'
);
});
};
PlaylistLoader
.
prototype
=
new
videojs
.
h
ls
.
Stream
();
PlaylistLoader
.
prototype
=
new
videojs
.
H
ls
.
Stream
();
videojs
.
h
ls
.
PlaylistLoader
=
PlaylistLoader
;
videojs
.
H
ls
.
PlaylistLoader
=
PlaylistLoader
;
})(
window
,
window
.
videojs
);
...
...
src/segment-parser.js
View file @
e13e2ae
(
function
(
window
)
{
var
videojs
=
window
.
videojs
,
FlvTag
=
videojs
.
h
ls
.
FlvTag
,
H264Stream
=
videojs
.
h
ls
.
H264Stream
,
AacStream
=
videojs
.
h
ls
.
AacStream
,
FlvTag
=
videojs
.
H
ls
.
FlvTag
,
H264Stream
=
videojs
.
H
ls
.
H264Stream
,
AacStream
=
videojs
.
H
ls
.
AacStream
,
MP2T_PACKET_LENGTH
,
STREAM_TYPES
;
...
...
@@ -11,7 +11,7 @@
* An object that incrementally transmuxes MPEG2 Trasport Stream
* chunks into an FLV.
*/
videojs
.
h
ls
.
SegmentParser
=
function
()
{
videojs
.
H
ls
.
SegmentParser
=
function
()
{
var
self
=
this
,
parseTSPacket
,
...
...
@@ -432,8 +432,8 @@
};
// MPEG2-TS constants
videojs
.
h
ls
.
SegmentParser
.
MP2T_PACKET_LENGTH
=
MP2T_PACKET_LENGTH
=
188
;
videojs
.
h
ls
.
SegmentParser
.
STREAM_TYPES
=
STREAM_TYPES
=
{
videojs
.
H
ls
.
SegmentParser
.
MP2T_PACKET_LENGTH
=
MP2T_PACKET_LENGTH
=
188
;
videojs
.
H
ls
.
SegmentParser
.
STREAM_TYPES
=
STREAM_TYPES
=
{
h264
:
0x1b
,
adts
:
0x0f
};
...
...
src/stream.js
View file @
e13e2ae
...
...
@@ -65,5 +65,5 @@
});
};
videojs
.
h
ls
.
Stream
=
Stream
;
videojs
.
H
ls
.
Stream
=
Stream
;
})(
window
.
videojs
);
...
...
src/videojs-hls.js
View file @
e13e2ae
...
...
@@ -8,28 +8,6 @@
(
function
(
window
,
videojs
,
document
,
undefined
)
{
videojs
.
hls
=
{
/**
* Whether the browser has built-in HLS support.
*/
supportsNativeHls
:
(
function
()
{
var
video
=
document
.
createElement
(
'video'
),
xMpegUrl
,
vndMpeg
;
// native HLS is definitely not supported if HTML5 video isn't
if
(
!
videojs
.
Html5
.
isSupported
())
{
return
false
;
}
xMpegUrl
=
video
.
canPlayType
(
'application/x-mpegURL'
);
vndMpeg
=
video
.
canPlayType
(
'application/vnd.apple.mpegURL'
);
return
(
/probably|maybe/
).
test
(
xMpegUrl
)
||
(
/probably|maybe/
).
test
(
vndMpeg
);
})()
};
var
// the desired length of video to maintain in the buffer, in seconds
...
...
@@ -95,60 +73,7 @@ var
}
},
/**
* Creates and sends an XMLHttpRequest.
* @param options {string | object} if this argument is a string, it
* is intrepreted as a URL and a simple GET request is
* inititated. If it is an object, it should contain a `url`
* property that indicates the URL to request and optionally a
* `method` which is the type of HTTP request to send.
* @param callback (optional) {function} a function to call when the
* request completes. If the request was not successful, the first
* argument will be falsey.
* @return {object} the XMLHttpRequest that was initiated.
*/
xhr
=
videojs
.
hls
.
xhr
=
function
(
url
,
callback
)
{
var
options
=
{
method
:
'GET'
},
request
;
if
(
typeof
callback
!==
'function'
)
{
callback
=
function
()
{};
}
if
(
typeof
url
===
'object'
)
{
options
=
videojs
.
util
.
mergeOptions
(
options
,
url
);
url
=
options
.
url
;
}
request
=
new
window
.
XMLHttpRequest
();
request
.
open
(
options
.
method
,
url
);
if
(
options
.
responseType
)
{
request
.
responseType
=
options
.
responseType
;
}
if
(
options
.
withCredentials
)
{
request
.
withCredentials
=
true
;
}
request
.
onreadystatechange
=
function
()
{
// wait until the request completes
if
(
this
.
readyState
!==
4
)
{
return
;
}
// request error
if
(
this
.
status
>=
400
||
this
.
status
===
0
)
{
return
callback
.
call
(
this
,
true
,
url
);
}
return
callback
.
call
(
this
,
false
,
url
);
};
request
.
send
(
null
);
return
request
;
},
xhr
,
/**
* TODO - Document this great feature.
...
...
@@ -247,44 +172,7 @@ var
return
duration
;
},
/**
* Constructs a new URI by interpreting a path relative to another
* URI.
* @param basePath {string} a relative or absolute URI
* @param path {string} a path part to combine with the base
* @return {string} a URI that is equivalent to composing `base`
* with `path`
* @see http://stackoverflow.com/questions/470832/getting-an-absolute-url-from-a-relative-one-ie6-issue
*/
resolveUrl
=
videojs
.
hls
.
resolveUrl
=
function
(
basePath
,
path
)
{
// use the base element to get the browser to handle URI resolution
var
oldBase
=
document
.
querySelector
(
'base'
),
docHead
=
document
.
querySelector
(
'head'
),
a
=
document
.
createElement
(
'a'
),
base
=
oldBase
,
oldHref
,
result
;
// prep the document
if
(
oldBase
)
{
oldHref
=
oldBase
.
href
;
}
else
{
base
=
docHead
.
appendChild
(
document
.
createElement
(
'base'
));
}
base
.
href
=
basePath
;
a
.
href
=
path
;
result
=
a
.
href
;
// clean up
if
(
oldBase
)
{
oldBase
.
href
=
oldHref
;
}
else
{
docHead
.
removeChild
(
base
);
}
return
result
;
},
resolveUrl
,
/**
* Initializes the HLS plugin.
...
...
@@ -293,7 +181,7 @@ var
init
=
function
(
options
)
{
var
mediaSource
=
new
videojs
.
MediaSource
(),
segmentParser
=
new
videojs
.
h
ls
.
SegmentParser
(),
segmentParser
=
new
videojs
.
H
ls
.
SegmentParser
(),
player
=
this
,
srcUrl
,
...
...
@@ -303,7 +191,7 @@ var
updateDuration
;
// if the video element supports HLS natively, do nothing
if
(
videojs
.
h
ls
.
supportsNativeHls
)
{
if
(
videojs
.
H
ls
.
supportsNativeHls
)
{
return
;
}
...
...
@@ -346,13 +234,13 @@ var
}
// do nothing if the source is handled by one of the standard techs
for
(
j
in
player
.
options
().
techOrder
)
{
techName
=
player
.
options
().
techO
rder
[
j
];
techName
=
techName
[
0
].
toUpperCase
()
+
techN
ame
.
substring
(
1
);
if
(
videojs
[
techName
].
canPlayS
ource
({
type
:
sources
[
i
].
type
}))
{
return
;
}
}
//
for (j in player.options().techOrder) {
//techname = player.options().techo
rder[j];
//techname = techname[0].touppercase() + techn
ame.substring(1);
//if (videojs[techname].canplays
ource({ type: sources[i].type })) {
//
return;
//
}
//
}
// use the plugin if the MIME type specifies HLS
if
((
/application
\/
x-mpegURL/
).
test
(
sources
[
i
].
type
)
||
...
...
@@ -638,28 +526,158 @@ var
oldMediaPlaylist
=
updatedPlaylist
;
});
});
player
.
src
([{
src
:
videojs
.
URL
.
createObjectURL
(
mediaSource
),
type
:
"video/flv"
}]);
if
(
player
.
options
().
autoplay
)
{
player
.
play
();
}
//player.src([{
//src: videojs.URL.createObjectURL(mediaSource),
//type: "video/flv"
//}]);
//if (player.options().autoplay) {
//player.play();
//}
};
videojs
.
plugin
(
'hls'
,
function
()
{
if
(
typeof
Uint8Array
===
'undefined'
)
{
return
;
var
mpegurlRE
=
/^application
\/(?:
x-|vnd
\.
apple
\.)
mpegurl/i
;
videojs
.
Hls
=
videojs
.
Flash
.
extend
({
init
:
function
(
player
,
options
,
ready
)
{
videojs
.
Flash
.
call
(
this
,
player
,
options
,
ready
);
player
.
hls
=
{};
this
.
ready
(
function
()
{
console
.
log
(
'ready!'
);
//init.call(player, options);
});
}
});
var
initialize
=
function
()
{
return
function
()
{
this
.
hls
=
initialize
();
init
.
apply
(
this
,
arguments
);
};
//for (var prop in videojs.Flash) {
//videojs.Hls[prop] = videojs.Flash[prop];
//}
//for (prop in videojs.Flash.prototype) {
//videojs.Hls.prototype[prop] = videojs.Flash[prop];
//}
videojs
.
Hls
.
isSupported
=
function
()
{
return
videojs
.
Flash
.
isSupported
()
&&
videojs
.
MediaSource
;
}
videojs
.
Hls
.
canPlaySource
=
function
(
srcObj
)
{
return
mpegurlRE
.
test
(
srcObj
.
type
)
||
videojs
.
Flash
.
canPlaySource
.
call
(
this
,
srcObj
);
};
videojs
.
Hls
.
supportsNativeHls
=
(
function
()
{
var
video
=
document
.
createElement
(
'video'
),
xMpegUrl
,
vndMpeg
;
// native HLS is definitely not supported if HTML5 video isn't
if
(
!
videojs
.
Html5
.
isSupported
())
{
return
false
;
}
xMpegUrl
=
video
.
canPlayType
(
'application/x-mpegURL'
);
vndMpeg
=
video
.
canPlayType
(
'application/vnd.apple.mpegURL'
);
return
(
/probably|maybe/
).
test
(
xMpegUrl
)
||
(
/probably|maybe/
).
test
(
vndMpeg
);
})();
/**
* Creates and sends an XMLHttpRequest.
* @param options {string | object} if this argument is a string, it
* is intrepreted as a URL and a simple GET request is
* inititated. If it is an object, it should contain a `url`
* property that indicates the URL to request and optionally a
* `method` which is the type of HTTP request to send.
* @param callback (optional) {function} a function to call when the
* request completes. If the request was not successful, the first
* argument will be falsey.
* @return {object} the XMLHttpRequest that was initiated.
*/
xhr
=
videojs
.
Hls
.
xhr
=
function
(
url
,
callback
)
{
var
options
=
{
method
:
'GET'
},
request
;
if
(
typeof
callback
!==
'function'
)
{
callback
=
function
()
{};
}
if
(
typeof
url
===
'object'
)
{
options
=
videojs
.
util
.
mergeOptions
(
options
,
url
);
url
=
options
.
url
;
}
request
=
new
window
.
XMLHttpRequest
();
request
.
open
(
options
.
method
,
url
);
if
(
options
.
responseType
)
{
request
.
responseType
=
options
.
responseType
;
}
if
(
options
.
withCredentials
)
{
request
.
withCredentials
=
true
;
}
request
.
onreadystatechange
=
function
()
{
// wait until the request completes
if
(
this
.
readyState
!==
4
)
{
return
;
}
// request error
if
(
this
.
status
>=
400
||
this
.
status
===
0
)
{
return
callback
.
call
(
this
,
true
,
url
);
}
return
callback
.
call
(
this
,
false
,
url
);
};
initialize
().
apply
(
this
,
arguments
);
});
request
.
send
(
null
);
return
request
;
};
/**
* Constructs a new URI by interpreting a path relative to another
* URI.
* @param basePath {string} a relative or absolute URI
* @param path {string} a path part to combine with the base
* @return {string} a URI that is equivalent to composing `base`
* with `path`
* @see http://stackoverflow.com/questions/470832/getting-an-absolute-url-from-a-relative-one-ie6-issue
*/
resolveUrl
=
videojs
.
Hls
.
resolveUrl
=
function
(
basePath
,
path
)
{
// use the base element to get the browser to handle URI resolution
var
oldBase
=
document
.
querySelector
(
'base'
),
docHead
=
document
.
querySelector
(
'head'
),
a
=
document
.
createElement
(
'a'
),
base
=
oldBase
,
oldHref
,
result
;
// prep the document
if
(
oldBase
)
{
oldHref
=
oldBase
.
href
;
}
else
{
base
=
docHead
.
appendChild
(
document
.
createElement
(
'base'
));
}
base
.
href
=
basePath
;
a
.
href
=
path
;
result
=
a
.
href
;
// clean up
if
(
oldBase
)
{
oldBase
.
href
=
oldHref
;
}
else
{
docHead
.
removeChild
(
base
);
}
return
result
;
};
//videojs.Hls.onReady = videojs.Flash.onReady;
//videojs.Hls.onEvent = videojs.Flash.onEvent;
//videojs.Hls.onError = videojs.Flash.onError;
})(
window
,
window
.
videojs
,
document
);
...
...
Please
register
or
sign in
to post a comment