I have a JavaScript video playlist. The videos are served from another domain, not mine. And recently I discovered problems with playing some videos. Sometimes, I receive net::ERR_CONTENT_LENGTH_MISMATCH error. These videos start playing and after 2-3 seconds they stop by themselves. Then they begin playing after 1-4 minutes. Only some videos have this behavior.
Can I check somehow for this error before playing a video? I want to skip the video if the error is detected and play a next one.
I encountered this exact issue when I was trying to continually re-download an image that was continually being re-uploaded.
Unsurprisingly the image was sometimes incomplete but, even so, I've not found a way to prevent the error from being logged - but I can catch it like this:
$('#myPic').attr('src', 'cacheless-pic.bmp?d='+ new Date().getTime())
.on('error', function() {
console.log('Oops - image of broken.');
});
I'm uncertain if this will help with your videos, but it's all I've got right now!
Related
I've been trying to work with the YouTube iframe api but I've noticed that sometimes it looks like it doesn't want to play any video, I get the following:
An error occurred. Please try again later (Playback ID: XXX)
It doesn't happen all the time though, so far I assume it happens when I swap between Google/YouTube accounts...
Does anyone know how I can prevent / resolve this issue from happening?
I have a Netflix account and I have peeked under the hood at its video player running inside Google Chrome. Netflix calls its video player "Cadmium" and the javascript exposes all the functions and event handlers you might expect, such as play, stop, pause, mute, etc. I'm building a little Chrome extension that would enable me to call these Cadmium player function, but the hard part for me is figuring out how to create an instance of the player so I can start calling. The javascript is large, complex, and somewhat obscure. Once I can create an instance of that player, I'm thinking that making calls into the functions will be easy.
Here is a relevant chunk of js:
muteOn: function() {
this.savedVolume = this.getVolume(),
this.updateVolumeDisplay(0),
this.scrubber.updatePercent(0),
this.muted = !0,
this.videoPlayer.setMuted(this.muted)
}
In Chrome dev tools I can set a breakpoint inside that block, and execution hits the breakpoint when I click the Mute button on the netflix video player. The Netflix js is (unsurprisingly) heavily obfuscated via method renaming. I tried stepping through the code in the debugger and ended down a hundred rabbit holes, never able to find my way to the top of the stack, so that I could make that same call (at top of stack) to simulate the user clicking the mute button. I also tried the approach of programmatically clicking the mute button on the UI player, which would meet my needs equally well, but they have serious defensive mechanisms in there, spinning me like a top.
Since there are over 100K lines of javascript, and I'm uncertain which chunks exactly would be relevant for this post, I would like to suggest that you load Netflix in Chrome, open dev tools, play a movie, and inspect the pause or mute button. Interacting with those video player controls takes you into the maze of javascript which I'm trying to see how I can tap into to control aspects of the player programmatically (just from dev tools is fine for now). Another important thing I need to figure out is how to query the video player to determine the current elapsed time of the playing video.
Any ideas how I can crack this nut? (Thanks in advance!)
Using Chrome, I get playback using HTML 5 video.
Once you get a hold on the <video> tag element, you can use the HTML 5 video API:
Get the <video> element
var video = document.evaluate('//*[#id="70143639"]/video',document).iterateNext()
70143639 is the id of the video, as in https://www.netflix.com/watch/70143639
Remaining time (HH:mm)
document.evaluate('//*[#id="netflix-player"]/div[4]/section[1]/label', document).iterateNext().innerHTML
Elapsed time (seconds)
video.currentTime
Elapsed time updates
video.addEventListener("timeupdate",
function(e) {
console.debug("Seconds elapsed: ", e.timeStamp/1000/60);
}
);
Note that I don't get the same results as with video.currentTime, you may need to use an offset based on the difference. Also it may be something explained in the spec: https://www.w3.org/TR/html5/embedded-content-0.html
Play
video.play();
Pause
video.pause();
Go back and forth in time
Courtesy of rebelliard:
netflix.cadmium.UiEvents.events.resize[1].scope.events.dragend[1].handler(null, {value: 600, pointerEventData: {playing: false}}); where 600 is the number of seconds to seek.
Note that I ran into "Whoops, something went wrong..." using this:
video.currentTime += 60;
Even with pause and play calls. This is what this demo page does, you nay need to read the full spec on seeking.
Mute and get muted status
video.muted = true
Like video.currentTime, this is a writeable property.
I have a single page website on which I would like to host up to 14 videos using the html5 video player. The video files are all between 80 and 150mbs and I'm currently hosting them on AWS S3.
I'm running into a problem, however, which is that the players do not load well. Once I click play, they take often 10 seconds to start playing. Because of this, I tried turning on the preload function (i.e. preload="auto"), but this led to other problems. Because there are so many players on the page, some of the players stall -- I think because when a browser tries to download too many at once, some will stall.
In order to mitigate that problem, I setup a queue to preload the videos three at a time. That works, but now I've run into another problem: Chrome, at least, stalls giving a message "waiting for available socket...." I know from this that that is probably due to a limit on the maximum six websockets that can be open at once.
So now I'm truly stumped. I'm not sure how to guarantee that the videos start playing in a reasonable time (1-3 seconds) after the user hits play, and not max out the browser's limits. I'm starting to wonder if this just can't be accomplished given the limits of the html5 video player.
If anyone has any ideas about workaround, or ways in which approach could be altered it would be much appreciated.
So instead of turning preloading on, I would suggest you set preload to none
e.g:
<video id="myVideo" preload="none">
Think of it this way - if you set 14 fairly large videos to all download at once, so they are available immediately for the user wants them, you'll end up with no one video actually fully loaded.
If you set them to not download at all until the user requests one (i.e. clicks the play button) then there may still be a small delay. However they'll end up downloading less overall, they'll only download the videos they actually watch and the page is much less likely to crash. This is much more considerate to the user too (think those on low bandwidth/throttled connections).
However, not all browsers respect the preload="none" option and may preload parts of the video anyway. The safest possible, but more complicated way would be to put placeholder images with fake play buttons on them, which on user click dynamically inserts a video tag to the DOM. That way you can be sure no video tag is ever loaded until it is requested.
I have used video.js for several videos on two previous projects. The projects were cross browser and work fine.
On project 3 I set up the video reference in a floating div like so...
I get the following error from Firefox on loading the page into the browser...
Media resource tio4.mp4 could not be decoded. tio4.php
All candidate resources failed to load. Media load paused.
I attempt to play the video subsequently with...
videojs("example_video_1").play();
but (of course) it does not play.
Swapping tio4.mp4 with a video from a previous project I have no problems.
Running tio4.mp4 (The video that gives the "could not be coded" error) in Movie Maker shows the video running fine.
Do I need a refinement in my video reference? What else?
The original video (The one giving me the problems) was formatted in an obscure tool.
I put it in Movie Maker and tried saving it which made no difference. I then cut a tiny piece off the Movie and saved it as a "clip" which worked on this one and a subsequent one!
Using the YouTube iframe player in an iOS UIWebView, I'm periodically seeing an onError event with error code 5 ("The requested content cannot be played in an HTML5 player or another error related to the HTML5 player has occurred").
The error is not associated with particular videos (that is, the video throwing the error plays just fine other times). Curiously, the errors often come in bursts: several videos in a row, from different channels, will throw the same error (each in a new UIWebView).
At some point, the error disappears, and the same video can be watched on the device that originally had the error. This has been going on for months.