HTML 5 audio element bug in Chrome - javascript

I've got a pretty silly bug in Chrome with the HTML5 audio element. Basically if I try to set the currentTime immediately after setting the source and then try to play, it throws an exception. This only occurs in Chrome.
Plunker : https://plnkr.co/edit/GZm9nZkmrt0ZvX6D85Qy?p=preview
<audio id="audio_0" src = "https://d2zsljmk3mm9kv.cloudfront.net/assets/samples/56c5a7c03f511270e90cb9373ea22a43d6f37082/112eeb9ddba02ec9"/>
$(document).ready(function(){
$("#audio_0")[0].currentTime = 80;
$("#audio_0")[0].play();
});
I've tried all sorts of combinations on trying to play after seekend, oncanplaythrough etc events but no luck. The only way to get it to work is to wait long enough for it to load the entire file which is just not acceptable.
Has anyone been able to get around this? Note that jPlayer does the same thing.
Thanks

Related

How to prevent playback error YouTube iframe api

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?

Autoplaying Video element from Javascript does not work on iOS Safari

I'm trying to get video stream from phone camera and display the stream on a video element. This is the gist of the code I have:
...
navigator.mediaDevices.getUserMedia(constraints)
.then((stream)=>{
video.srcObject=stream;
video.volume=0;
video.mute=0;
video.play(); //error here on iOS Safari
...
While this works on all desktop and android browsers, this does not seem to work on iOS, giving me the error on line video.play().
From what I understand so far, this seems to be a safety measure by Safari on mobile to prevent websites from consuming too much of user's data. Meaning, unless specifically initiated by the user, the browser won't allow video.play()
I have tried adding "muted" attribute on the video element itself (besides just autoplay), but that did not seem to fix the issue.
So, I'd like to know if there are any other remedies to the issue here or if I should look for alternative ways to show the video feed. Any help/suggestions are greatly appreciated.
Have you tried adding playsinline to the video element?
https://webkit.org/blog/6784/new-video-policies-for-ios/

Mobile Safari crash when changing video tag source dynamically

I've recently been trying to solve an issue where a piece of code that handles dynamic video source change:
vid.src = "some_movie_url";
eventually causes mobile safari to crash.
The flow is a bit complex so I'm not publishing it here (too many async/event callback handling).
The actual question is this, I see in the device logs the following exception being thrown:
"An AVPlayerItem cannot be associated with more than one instance of AVPlayer"
What action in mobile safari on a video tag may cause such an issue?
I see many question where Objective C native apps are involved, but non where mobile safari causes this issue.
Assuming that you're using JavaScript to simply replace the src attribute of the video element using DOM manipulation, perhaps you could get around this by instead removing the video node altogether, creating a new video node with the src attribute you want, and attaching that to the DOM.
Something along these lines:
var oldVidNode, vidNodeParent, newVidNode, newVidSrc;
oldVidNode = document.querySelector("video");
vidNodeParent = oldVidNode.parentNode;
vidNodeParent.removeChild(oldVidNode);
newVidNode = document.createElement("video");
newVidSrc = document.setAttribute("src", "foo.m4v");
vidNodeParent.appendChild(newVidNode);

MediaSource API - reloading MP4 video being recorded

I have a MP4/H264 video clip which is being captured so that it grows every 4 seconds and its metadata is dynamically refreshed. Since this is not fragmented MP4 I cannot use MediaSource API to manipulate chunks.
I'm looking for a way to update/refresh the duration of the video during playback without the need to reload the whole clip.
In short words I'm looking for a way to do the following in more user-friendly way.
setInterval(function() {
video.src = video.src;
}, 4000);
I'd like to avoid having 2 video tags and switching from one to another with the method above. I have also tried with popcorn.js without any luck.
Using Chrome, and... only chrome so not worried about other browsers.
Any advice would be greatly appreciated!
I am not sure that is possible. As per specs:
If a src attribute of a media element is set or changed, the user agent must invoke the media element's media element load algorithm. (Removing the src attribute does not do this, even if there are source elements present.)
So if you touch the video.src the browser should invoke implicitly video.load(). In your case (setInterval) Chrome does this.
I guess you already went the route of saving the currentTime of the video before changing the src and applying it after the src change (wait for the canplay event in this case and call video.play() to resume playing)? I guess you would have some stuttering for 4 seconds refresh in your case.
It seems that you are trying to emulate a live stream as an on demand feed and I do not know a way to do this with progressive download of mp4 (read with un-fragmented MP4).
Related article.
Thanks

Creating two HTML5 video elements with the same source not working

I am trying to do a simple thing but so far I have not had any success and I cannot get why it does not work.
I need two (or several, for that matter) HTML5 video elements to play the same video, but it does not work. Here is the code I have been trying: http://jsfiddle.net/4K8DZ/
Any ideas on why is that?
Thanks
Just ran into this problem myself. I worked around it by adding a query param to the source file of the second video element’s source:
video1.setAttribute("src", "whatever.mp4");
video2.setAttribute("src", "whatever.mp4?random=1");
http://jsfiddle.net/br2bn/
Though I am still not able to just comment, I have to submit this as an answer.
This bug continuous for files > 10mb as long as one of them is buffering, the other one wont work. If you press pause, the other one will work.
I updated the example to demonstarate the bug: http://jsfiddle.net/4K8DZ/23/
Actually, I can play only one video with iPad + Safari and Chrome on Windows7.
With Safari, if I start one video, then another stops.
With Chrome, I got almost the same result.

Categories