videojs / videojs-contrib-hls Goto Github PK
View Code? Open in Web Editor NEWHLS library for video.js
Home Page: http://videojs.github.io/videojs-contrib-hls/
License: Other
HLS library for video.js
Home Page: http://videojs.github.io/videojs-contrib-hls/
License: Other
Hi,
it seems that some refactoring between 4.5 and 4.6 broke the vjs-has-started / related callbacks. I can click the button and the hls video plays, but the css class is not applied.
if i manually hack it in the dom, the button disappears and the controlbar appreas correctly.
The valid mime-types we accept should be case insensitive for the type/subtype params per:
http://tools.ietf.org/html/rfc2045. Currently we fail if a valid type is used, but it doesn't match the case sensitivity we are expecting.
[4:55 PM] Tom Ruggles: yup. For shame.
;)
I changed it from "type": "application/x-mpegUrl" to "type": "application/x-mpegURL" and it worked.
@dmlap @raytiley Could you provide the following folder files (../node_modules/**) download address for test?
because the following codes need those files:
<\script src="../node_modules/sinon/lib/sinon.js">
<\script src="../node_modules/sinon/lib/sinon/util/event.js">
<\script src="../node_modules/sinon/lib/sinon/util/fake_xml_http_request.js">
<\script src="../node_modules/sinon/lib/sinon/util/xhr_ie.js">
<\script src="../node_modules/sinon/lib/sinon/util/fake_timers.js">
<\link rel="stylesheet" href="../libs/qunit/qunit.css" media="screen">
<\script src="../libs/qunit/qunit.js">
<\script src="../node_modules/video.js/dist/video-js/video.js">
<\script src="../node_modules/videojs-contrib-media-sources/src/videojs-media-sources.js">
we are developing an android app for our OTT platform.We have our streams in HLS format both(Live and VOD).So we are trying to embedd video.js in our website for playback our streams.The streams are encoded in multibitrate for adaptive bitrate streaming.When we tried it in our pc browsers its playing fine but the streams are not being switched.It only play only a single bitrate stream.but it work fine on android and ios.
whats the reason for this error..??
Am I missing something or there are inconsistencies between videojs-contrib-hls
and videojs
?
I tried to follow the example from the readme and I get a lot of errors like, can't find: window.videojs.util.mergeOptions
. Looking at videojs
I so there is a videojs.obj.merge
, maybe it was renamed?
Also I have a http://domain.com/stream.ts format url, from a media streaming server, is there anyway to play that directly without a .m3u8 file?
The fillBuffer
function is called on the timeupdate
event. Since timeupdate
doesn't fire when the video is paused, pausing causes the player to stop further buffering of data.
The HLS tech advertises support for HLS and all the formats the Flash tech can support. Unfortunately, this means that it's impossible to setup the tech as a polyfill for HLS support without involving Flash when it's not strictly required. If you have sources like this:
{ src: 'movie.mp4', type: 'video/mp4' },
{ src: 'movie.m3u8', type: 'application/x-mpegURL' }
and techOrder ['hls', 'html5']
, despite the fact you may be on a browser that support mp4 natively, you will end up with the mp4 playing through the HLS tech.
cc @pcosta-bc
The issue listed below has not been fixed in the videojs master branch or the feature branch for HLS. I'm re-creating it here because the apple settings require the audio only track, but this breaks the Chrome / Flash fallback. I'm hoping it's already fixed, and apologize if so but github removed the messaging functionality.
Hi Guys,
I have a playlist with variable durations of each segment. Each segment's duration is reported in seconds to a 10th decimal point precision, but there is obviously a rounding error. When HLS plugin plays this movie it is not able to detect the end of the movie. Safari and iOS are both able to correctly play this playlist.
#EXTM3U
#EXT-X-PLAYLIST-TYPE:VOD
#EXT-X-TARGETDURATION:11
#EXT-X-VERSION:3
#EXT-X-MEDIA-SEQUENCE:0
#EXTINF:10.9,
video-hls-3500-0.ts
#EXTINF:9.9,
video-hls-3500-1.ts
#EXTINF:9.9,
video-hls-3500-2.ts
#EXTINF:9.9,
video-hls-3500-3.ts
#EXTINF:9.6,
video-hls-3500-4.ts
#EXTINF:9.7,
video-hls-3500-5.ts
#EXTINF:9.9,
video-hls-3500-6.ts
#EXTINF:9.8,
video-hls-3500-7.ts
#EXTINF:9.9,
video-hls-3500-8.ts
#EXTINF:7.7,
video-hls-3500-9.ts
#EXT-X-ENDLIST
Thank you!
Poking around videojs trying to get a hls live stream to work. I noticed there is a hls branch in the videojs repo, as well as this separate repo. I was curious if a special build of videojs is required for this plugin. I cloned this repo and built it, but when I call .hls()
on my player object it is undefined. Should I be using videojs built from a different branch?
Any guidance on how to make this work would be appreciated.
i am fine with building from source, but tests are failing.
maybe do this
player.currentTime = function() {
return 20-goalBufferLength;
};
Now I have near 6-7 seconds
Is it possible to play *.ts items asap?
Thanks
Is there currently a way to get the bitrate (or download speed) of the content that is currently playing?
have you taken a look at some hls implementations for flash like the one on grindplayer or the marvellous video-js-swf from mangui for hls. It can be a really interesting alternative at the hls parsing/buffering by JS?
Moreover it immediately solves many incompatibilities
Maybe your position is the opposite and I just want to know if it is a plan in the future for you or not.
For me adding your project, the swf of mangui and a resolution selector and we can create the number one video player.
When compiled with Microsoft's Typescript compiler 1.0.1 these three lines in getFlvHeader() of segment-parser.js throw three errors:
result = new Uint8Array(headBytes.byteLength + metadata.byteLength);
result.set(head);
result.set(head.bytesLength, metadata.finalize());
The three errors are:
// error TS2094: The property 'byteLength' does not exist on value of type 'FlvTag'.
result = new Uint8Array(headBytes.byteLength + metadata.byteLength);
// error TS2082: Supplied parameters do not match any signature of call target:
// Type 'DataView' is missing property 'BYTES_PER_ELEMENT' from type 'Uint8Array'.
result.set(head);
// error TS2082: Supplied parameters do not match any signature of call target:
// Could not apply type 'number' to argument 2 which is of type 'FlvTag'.
// error TS2094: The property 'bytesLength' does not exist on value of type 'DataView'.
result.set(head.bytesLength, metadata.finalize());
The last error is the most severe one, because that expression gets evaluated to
result.set(NaN, NaN);
which browsers happily ignore (see Keep On Truckin').
I believe those lines of code should probably read:
// write out the duration metadata tag
metadata = new FlvTag(FlvTag.METADATA_TAG);
metadata.pts = metadata.dts = 0;
metadata.writeMetaDataDouble("duration", duration);
metadataLength = metadata.finalize().length;
result = new Uint8Array(headBytes.byteLength + metadataLength);
result.set(headBytes);
result.set(head.byteLength, metadataLength);
When compiled with Microsoft's Typescript compiler 1.0.1 this line in parseSegmentBinaryData() of segment-parser.js throws an error:
// error TS2094: The property 'readBytes' does not exist on value of type 'Uint8Array'.
streamBuffer.readBytes(data, data.length, streamBuffer.length);
I suspect this line should read:
streamBuffer.set(data, streamBuffer.length);
Please let me know if you need more information.
Bernd Paradies, Adobe Systems Inc.
@heff is working on better error handling in videojs, which changes some of the way that errors work. See the following PR: videojs/video.js#1191
This HLS plugin needs to update to follow the new error handling.
I've tried the example with Chrome 34.0.1847.3 dev 27.0.1 of Firefox on OS X, and in both cases it just shows the player and controls with no video. It works fine in Safari but it did that already.
Microsoft's Typescript compiler 1.0.1 finds 4 errors in videojs-hls.js.
This is one of them:
// xhr(), line 724
// error TS2094: The property 'readystate' does not exist on value of type 'XMLHttpRequest'.
if (request.readystate !== 4)
That line should read:
if (request.readyState !== 4)
Please let me know if you need more information.
Bernd Paradies, Adobe Systems Inc.
Hey guys!
Any chance of getting a situation report on this project? The README says "Coming Soon," but doesn't give much indication of when "Soon" is. :) The links to the Production and Developer builds are broken, too.
Since this commit: videojs/video.js#748 - do we even need to use this 'contrib' project at all?
In the mean time, we've been having success with: https://github.com/mangui/HLSprovider and this https://github.com/denivip/osmf-hls-plugin but would obviously prefer to use Video.js
If we can get a definitive answer about the status of this, I'll be happy to write a tutorial and to update the README.
This is because Android does not return "probably" or "maybe" for canPlayType
for the HLS mimetypes: application/x-mpegURL
and application/vnd.apple.mpegURL
.
hi,
this may be a matter of bad configuration but, in my setup video plays but when i try to seek i get this error:
VIDEOJS:
TypeError {stack: (...), message: "undefined is not a function"}
with following stack:
Uncaught TypeError: undefined is not a function videojs.hls.min.js:3
a.hls.setCurrentTime videojs.hls.min.js:3
V video.js:58
t.currentTime video.js:59
t.Kb video.js:80
t.Wa video.js:36
t.Wa video.js:80
e video.js:12
e.X.e.X video.js:5
videojs is 4.6.4
videojs.hls 0.8.2
If you're using the flash fallback and are using hls then the canplay event never fires. It works fine with the HTML5 player.
This expression returns true in Chrome 36.0.1985.125 on OSX:
VideoJSTechDetectorStatic.prototype._isSafari = function () {
return (/Safari/i).test(videojs.USER_AGENT);
};
The user agent string in in Chrome 36.0.1985.125 on OSX is:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/36.0.1985.125 Safari/537.36
The better implementation of _isSafari() is suggested in
http://stackoverflow.com/questions/7944460/detect-safari-browser:
VideoJSTechDetectorStatic.prototype._isSafari = function () {
var ua = videojs.USER_AGENT.toLowerCase();
if( ua.indexOf('safari') !=-1 && ua.indexOf('chrome') == -1 )
{
return true;
}
return false;
};
Since the HLS plugin requires CORS headers on the HLS host, it sometimes fails. In these cases, it would be best if Video.js tried the next source rather than just failing.
Just hoping to get an idea of how far we are from supporting HLS through MSE. That may be something I try to help out with here soon if it's needed.
We talked about this briefly before, but one thing I'm wondering is if we'll end up with two techs, hls-mse and hls-flash, since the current HLS extends vjs.Flash, and the easiest way to add MSE HLS would seem to be to extend vjs.Html5, like was done in vjs.Dashjs.
If the source is not specified during player initialization but later during plugin initialization, we get the below error.
VIDEOJS: Video.js: currentTime unavailable on Html5 playback technology element.
TypeError {stack: (...), message: "Cannot read property 'currentTime' of null"}
example.html:
<script>
videojs.options.flash.swf = 'node_modules/video.js/dist/video-js/video-js.swf';
// initialize the player
var player = videojs('video', {
techOrder: ['html5', 'flash', 'hls']
});
// fire the plugin
player.ready(function() {
player.onceux();
});
</script>
oneux.js :
onceux = function(options) {
var
settings = videojs.util.mergeOptions(defaults, options),
player = this;
var media_hls = 'http://once.unicornmedia.com/now/ctadaptive/m3u8/77128e82-3acd-4064-ab71-f6de437aba5d/da63d706-dae8-4110-9035-e7e79b753ed0/f1a96e7e-d5b8-4737-a527-45c0f79702d9/content.m3u8';
// set the player src to onceux url
player.src([
{ type: "application/x-mpegURL", src: media_hls }
]);
videojs.plugin('onceux', onceux);
};
Hi Guys,
I have autoplay: true, but when I load this HLS playlist, 'play' event is fired, but video itself does not start playing automatically. I have to actually click on the video for it to start playing.
Browser: Chrome latest
Thank you!
Amazon s3 allow secure links to files by setting auth header etc.. Is there an easy way to make HLS secure or where in the code would one do that. Is this feture already built in some where? Custom headers etc??
any help would be appreciated. We want to make sure only our website can access the HLS stream.
Around 9140ms, append()
starts taking > 16ms. It also appears that vjs_endOfStream
is a significant proportion of that time. That is surprising because vjs_endOfStream
should only be called when the playlist is complete and the last segment has been delivered to the SourceBuffer.
Exported CPU profile, Chrome 34/OS X
When playing a live stream using HLS, the stream plays for around 10 seconds before pausing. The streams are fine in HTML5 players.
My console is filled up with this message:
TypeError: originalSegment is undefined videojs.hls.js:136
This is Fedora 19, Firefox 30. I'll try to get an example to show, when work permits.
Any chance for a release with the endOfStream fix (#111)? The current release won't finish playback for me.
When compiled with Microsoft's Typescript compiler 1.0.1 this line in m3u8-parser.js throws an error, pointing out that parseFloat() only accepts one parameter:
if (match[1]) {
event.duration = parseFloat(match[1], 10);
}
The line above should read:
if (match[1]) {
event.duration = parseFloat(match[1]);
}
Please let me know if you need more information.
Bernd Paradies, Adobe Systems Inc.
Microsoft's Typescript compiler 1.0.1 finds 4 errors in videojs-hls.js.
The following three places are not severe errors. But they still show incorrect usage of internal and external APIs:
player.hls.setCurrentTime = function(currentTime) {
if (!(this.playlists && this.playlists.media())) {
// return immediately if the metadata is not ready yet
return 0;
}
player.hls.setCurrentTime seems to be a void function and should read:
player.hls.setCurrentTime = function(currentTime) {
if (!(this.playlists && this.playlists.media())) {
// return immediately if the metadata is not ready yet
return;
}
From what I understand fillbuffer expects offsets:
/**
* Determines whether there is enough video data currently in the buffer
* and downloads a new segment if the buffered time is less than the goal.
* @param offset (optional) {number} the offset into the downloaded segment
* to seek to, in milliseconds
*/
fillBuffer = function(offset) {
But registering fillbuffer directly as in drainBuffer() exposes fillbuffer to calls with Event objects instead of offsets:
player.on('timeupdate', fillBuffer);
Instead I suggest using a wrapper:
player.on('timeupdate', function(e) { fillBuffer(); });
The second parameter is being ignored:
player.hls.sourceBuffer.appendBuffer(tags[i].bytes, player);
I suggest removing 'player':
player.hls.sourceBuffer.appendBuffer(tags[i].bytes);
This code is technically correct
videojs.Hls.isSupported = function() {
return !videojs.Hls.supportsNativeHls &&
videojs.Flash.isSupported() &&
videojs.MediaSource;
};
But I find this version cleaner:
videojs.Hls.isSupported = function() {
return !videojs.Hls.supportsNativeHls &&
videojs.Flash.isSupported() &&
!!videojs.MediaSource;
};
Please let me know if you need more information.
Bernd Paradies, Adobe Systems Inc.
Hi,
I'm using the example (https://github.com/videojs/videojs-contrib-hls/blob/master/example.html) to view my HLS stream.
It's working quite well, reading the m3u8 file:
#EXTM3U
#EXT-X-VERSION:3
#EXT-X-MEDIA-SEQUENCE:0
#EXT-X-TARGETDURATION:50
#EXT-X-DISCONTINUITY
#EXTINF:40.533,
1-0.ts
#EXTINF:30.367,
1-1.ts
#EXTINF:49.991,
1-2.ts
#EXT-X-DISCONTINUITY
#EXTINF:0.116,
1-3.ts
#EXT-X-DISCONTINUITY
#EXTINF:31.900,
1-4.ts
#EXTINF:41.333,
1-5.ts
#EXTINF:39.867,
1-6.ts
#EXTINF:39.900,
1-7.ts
#EXTINF:39.833,
1-8.ts
#EXTINF:39.867,
1-9.ts
#EXTINF:39.900,
1-10.ts
#EXTINF:39.833,
1-11.ts
#EXTINF:7.633,
1-12.ts
#EXTINF:36.767,
1-13.ts
playback is working, but there's no timeline, so seeking impossible .... .
(Btw. Firefox (Ubuntu) played the stream quite well, now (reloading) the only thing i get is a black screen, saying 'LIVE';
Dolphin (Android) plays the stream, but there's no timeline either)
So, what do i have to change to get seeking support in here?
Thanks!
I'm wondering if it could be possible to disentangle buffer management from player API methods like setCurretTime() and play().
For instance, we're currently using setCurrentTime to empty and refill the buffer on a seek. It seems like instead we could have something external monitoring events, like seeking, and updating the buffer independently.
Are there any specific blockers/challenges we might run into if we purse that direction, including for other API methods?
Part of the thought here is a deeper integration of Video.js with media source extensions, but either way I think this could help modularize some things.
My current thought is introducing something like a "source handler" into video.js, that could register itself with the existing html5 or Flash tech. If the source handler's specific format was provided, the tech would pass it the source and a reference to the playback element/object. From there the tech would continue to operate with the playback object as usual, and the source handler would interact directly with the playback object, not the tech, filling its buffer as needed.
That seems like the ideal scenario at least, and removes the need for HLS to subclass a tech.
Any thoughts on that specifically? @dmlap
Continuation of videojs/video.js#1287.
From looking at the docs, there doesn't appear to be a nice way to listen for when a .ts chunk starts downloading, stops downloading, and getting the duration of the chunk (you could look at target duration, but that isn't a sure thing).
If this data is present, how would I access it? Could there be an events added for when chunks start and finish downloading along with extra information such as duration of the chunk?
I get this alot when trying to stream a video, chrome and Firefox. it appears it tries to download the same ts file over and over and then keeps error-ing out on the index.
Uncaught RangeError: Offset is outside the bounds of the DataView flv-tag.js:293
finalize flv-tag.js:293
self.getNextTag segment-parser.js:143
segmentXhr.onreadystatechange videojs-hls.js:591
Any one have any suggestions?
I was upgrading a site to video.js 4.7.0 and noticed that seeking in HLS is broken with the newer version of video.js. It seems that this is caused by some change in the Flash component because reverting to the video-js.swf
from 4.6.4 makes it work again.
The url : http://9x9ch2.streamingfast.net/hls-live/livepkgr/_definst_/liveevent/live-ch2-1.m3u8
the url is tested to be valid, but when work with this plugin, it shows "segments is undefined" error. any idea why?
Thanks.
In flv-tag.js, L81 I found this line:
this.keyFrame = extraData; // Defaults to false
which overrides prior initialization of keyFrame in L59, L67 and L71:
this.keyFrame = false; // :Boolean
switch(type) {
case hls.FlvTag.VIDEO_TAG:
this.length = 16;
break;
case hls.FlvTag.AUDIO_TAG:
this.length = 13;
this.keyFrame = true;
break;
case hls.FlvTag.METADATA_TAG:
this.length = 29;
this.keyFrame = true;
break;
default:
throw("Error Unknown TagType");
}
I am confused as to what priority extraData should have. Is this perhaps the intended version?:
this.keyFrame = extraData; // Defaults to false
switch(type) {
case hls.FlvTag.VIDEO_TAG:
this.length = 16;
break;
case hls.FlvTag.AUDIO_TAG:
this.length = 13;
this.keyFrame = true;
break;
case hls.FlvTag.METADATA_TAG:
this.length = 29;
this.keyFrame = true;
break;
default:
throw("Error Unknown TagType");
}
Now, if I use that version I'll get 6 errors in the unit tests. Is that because my version is incorrect? Or does this experiment point to other potential problems in the videojs-contrib-hls code base?
Please let me know if you need more information.
Bernd Paradies, Adobe Systems Inc.
https://github.com/videojs/videojs-contrib-hls#getting-started has a following downloads link, which is broken: https://raw.github.com/videojs/videojs-contrib-hls/master/dist/videojs-hls.min.js
We want to make it possible to answer the question, "Am I doing a good
job playing back video?" Contrary to intuition, that's not a simple
question. There are multiple axes on which we might wish to
optimize. For instance,
Reasonable people may disagree on the weighting each of those
questions have in the definition of "good." Our goal is to provide
statistics that allow video implementors to quantify how their player
is performing along the dimensions that are important to them.
Continuous playback is a function of network conditions at the client
and the switching behavior of the player.
video-time / time
This quantity can be calculated by monitoring timeupdate
events and
checking currentTime()
.
Though it's possible to produce high bitrate video that looks and
sounds terrible, it's generally safe to assume that more bits per
second mean better playback experiences.
bits-presented / video-time
This metric would be derivable if the aggregate number of bits
presented to the viewer were available.
Initial playback time is dependent on the time to fetch stream
metadata and the download time of the first segment.
time(playing_i) - time(play_i)
This can be calculated from measuring the delay between the play
and
playing
events.
In most cases, the cost of delivering video is tied very closely to
the number of bits delivered.
bits-downloaded / video-time
It would be possible to quantify this if the total number of video
bits downloaded were available.
Consistency is almost an emergent property of other
behaviors. Choosing to be very responsive in the face of bandwidth
changes reduces consistency but decreases the probability that reduced
network conditions will result in a stall.
switch-count / video-time
It is possible to calculate this by periodically polling the active
playlist but would be more accessible if an event indicated a quality
switch or the total number of quality switches were exposed.
This playlist is interpreted by the parser as a media playlist. It should be parsed as a master playlist.
#EXTM3U
#EXT-X-VERSION:3
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=150000,CODECS="mp4a.40.5,avc1.42c00d",RESOLUTION=400x224
http://api35-phx.unicornmedia.com/now/od/m3u8/XXX/content.m3u8?visitguid=6c2aa0d0-0338-450f-b26c-3161332c6aa7&segmentlength=10&protocolversion=3
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=1200000,CODECS="mp4a.40.5,avc1.64001f",RESOLUTION=864x480
http://api35-phx.unicornmedia.com/now/od/m3u8/XXX/content.m3u8?visitguid=6c2aa0d0-0338-450f-b26c-3161332c6aa7&segmentlength=10&protocolversion=3
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=880000,CODECS="mp4a.40.5,avc1.42c01e",RESOLUTION=400x224
http://api35-phx.unicornmedia.com/now/od/m3u8/guid-stuff/content.m3u8?visitguid=6c2aa0d0-0338-450f-b26c-3161332c6aa7&segmentlength=10&protocolversion=3
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=660000,CODECS="mp4a.40.5,avc1.42c00d",RESOLUTION=400x224
http://api35-phx.unicornmedia.com/now/od/m3u8/guid-stuff/content.m3u8?visitguid=6c2aa0d0-0338-450f-b26c-3161332c6aa7&segmentlength=10&protocolversion=3
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=440000,CODECS="mp4a.40.5,avc1.42c00d",RESOLUTION=400x224
http://api35-phx.unicornmedia.com/now/od/m3u8/guid-stuff/content.m3u8?visitguid=6c2aa0d0-0338-450f-b26c-3161332c6aa7&segmentlength=10&protocolversion=3
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=340000,CODECS="mp4a.40.5,avc1.42c00d",RESOLUTION=400x224
http://api35-phx.unicornmedia.com/now/od/m3u8/guid-stuff/content.m3u8?visitguid=6c2aa0d0-0338-450f-b26c-3161332c6aa7&segmentlength=10&protocolversion=3
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=240000,CODECS="mp4a.40.5,avc1.42c00d",RESOLUTION=400x224
http://api35-phx.unicornmedia.com/now/od/m3u8/guid-stuff/content.m3u8?visitguid=6c2aa0d0-0338-450f-b26c-3161332c6aa7&segmentlength=10&protocolversion=3
The following stream plays in QuickTime on OS X but does not play with the HLS tech: http://bc-jsanford.s3.amazonaws.com/instant_play_demo/1402004163/index.m3u8
Hi Guys,
Browser: Chrome latest
...
#EXTINF:9.9,
video-hls-3500-8.ts
#EXTINF:7.7,
video-hls-3500-9.ts
#EXT-X-ENDLIST
This is a properly terminated playlist, but it is missing a newline character at the end. The plugin detects it as LIVE playlist as if it were not terminated with #EXT-X-ENDLIST
I am not sure it is a correct playlist according to the spec, but Safari and iOS are both able to play it correctly.
I'm doing HLS streaming with a finite playlist of segments.
The video segments have strictly monotonically increasing timestamps, but there might be timestamp gaps (of indefinite duration) between the segments. When encountering these gaps, the Flash player's progress bar skips forward: E.g. if there is a 30 second gap, the player's progress bar skips forward by 30 seconds.
The displayed total duration of the video does not increase accordingly. This causes funny rendering of the progress bar towards the end of the video playback:
It also happens when I explicitly specify #EXT-X-DISCONTINUITY for the gaps.
Both Safari's built-in HLS player's as well as JWPlayer's progress bars do not skip forward when encountering timestamp gaps, even when #EXT-X-DISCONTINUITY is not specified.
HLS with videojs does not work in Firefox (tried in v29.0.1)
Setup:
<video id="video_player" class="video-js vjs-default-skin" controls preload="auto" width="620px" height="465px" poster="https://thumbnail">
<source type="application/x-mpegURL" src="http://s3.amazonaws.com/my_bucket/my_playlist.m3u8">
</video>
videojs("video_player", { playbackRates: [1, 1.5, 2, 3], techOrder: ['hls', 'html5', 'flash'] })
Console output:
Specified "type" attribute of "application/x-mpegURL" is not supported. Load of media resource http://s3.amazonaws.com/my_bucket/my_playlist.m3u8 failed.
All candidate resources failed to load. Media load paused.
"VIDEOJS:" "ERROR:" "(CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED)" "No compatible source was found for this video." {code: 4, message: "No compatible source was found for this video."}
All candidate resources failed to load. Media load paused.
I don't see the Flash fallback .SWF being requested anywhere.
Moved from videojs/video-js-swf#95:
When playing a HLS stream with the Flash player (current master 8a98910) in a tab which is currently not the active tab, the playback will pause after some time. If you go to the tab, playback will resume. If you don't, playback will not resume, and the whole tab will crash a while later.
After playback has paused, my Activity Monitor shows a Google Chrome Helper process sponging up memory at about 10 megabytes per second, up until it consumes ~1.1GB and then the tab crashes.
It always happens at the same parts of the stream. The stream is a m3u8 playlist of finite length, with some #EXT-X-DISCONTINUITY flags and gaps in the timestamps between the video segments.
It does not seem to happen when the Flash player plays media that is not HLS.
I'm using Google Chrome 35.0.1916.114 on OSX and Flash (Adobe) 13.0.0.214.
@mkilling: moved this to the HLS repo. Do you believe this would occur with any HLS stream or is it something specific about the streams you're testing with?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.