JS alert is messing up HTML5 video - javascript

I have an mp4 video on my site that I play with $("#movie").get(0).play(). That works fine.
However, if I do alert("anything"); and then try playing the movie, the movie only advances a few frames (I get sound too). Then it freezes. The video controls still show "pause" being an option, so the player still thinks it's playing. I have to refresh the screen, and avoid alert()ing anything in order to play the whole video. How can I get around this problem?
I'm on the newest version of Chrome on a Macbook Pro with the newest Yosemite.

Related

HTML5 video re loading on switch and return to video tab; Samsung Stock Browser Android

I'm experiencing a weird behavior with Samsung Stock Browser for Android with HTML5 Video; (not happening on Chrome Android and Safari IOS)
When the HTML5 video plays and the user switches tab, then returns to the said tab with HTML5 video, the video reloads and starts from the beginning; (this is after the video has played for 4-6 seconds btw)
I've used "visibilitychange" and "window.onfocus / window.onblur" to detect such events; I also placed traces on parts of the code where the video loads a URL to which its not being called when the situation is happens; Also placed traces on the video tag error listener to see if there are any but nothing shows up;
Are there any incident which this has happened to others? What could cause this?
TIA!

How to autoplay HTML5 videos with sound (unmuted) in Safari

Safari and Chrome is not allowing video to autoplay if sound is on by default (unmuted). If you mute the video, it will autoplay, and the user is forced to enable sound. Fine and well, I can live with this.
However, in researching this, I found that YouTube (Safari 11, MacOS High Sierra), is allowing subsequent videos to be played with sound ON if the user turns sound on for a given video. Likewise, if user mutes the video, clicks onto a different video, this video will autoplay muted until user toggles the sound on. I would love to replicate this on a site in which I have created a video gallery of sorts. Each video does live on it's own page, and navigating the gallery will take user to a new page in the browser. This needs to stay the same, for multiple reasons (as opposed to creating a single media element and dynamically changing video source).
Alternatively, is there a way to convince Safari that a user has intentionally clicked a button in order to watch a video, thus allowing autoplay with sound on, when the user is simply clicking a link (in the form of a "Play Video Now" button) to a page with the video embedded?

JS to Play video in native player on iOS

I'm creating the responsive version of my website. There are a couple of videos.
At the moment, I use jwPlayer. That's fine on the full-size version and on iPads.
On iPhone, I get the 2 step behavior (Showing the video player just with the poster, and opening the native video player when launching the video.)
Is there a way to automatically (with some Javascript perhaps) load the video on the native video player? So JWplayer shouldn't even start at all...
In the end, User Experience would be : clicking on a thumbnail ->iOs video player ->back to thumbnails.
Is this possible?

Video Paused but its sound still trailing

I'm building a winstore app and building a skip-able intro (dynamically added it through JavaScript code).
However, if i skip it and set
this.video.pause();
in the button click function, even though the video is paused, the sound of the video is still trailing for a few sec before it stopped.
How could i make the sound stop right there with the images?
It's just weird that the video is already paused but the sound still can be heard when it should've been paused too (the video contain mp4 and mp3 in it).
It's weird because if a video is really paused it off the image and sound.
You can try this following command (it cut the sound) :
this.video.setAttribute("muted", "muted");
But it's not the solution because pause() method should work, so checks if you don't have 2 videos elements in your page.

Synchronising SoundCloud audio and Vimeo/Youtube video playing together

Alright, I'm working on one project which involves html5 audio, in addition to that a video is shown while audio is playing (Just video, no controls etc). Video is a visualisation (sometimes called equaliser) of audio that is playing, made beforehand in adobe after effects. both files (video and audio) are same length e.g. 3 min 20 sec. I need a way to synchronise both, as video might load slower than audio or vice versa. Therefore I need to make it so that on computers with slow internet connection if video stops loading at some point and starts buffering I need to pause audio, and once video resumes start audio again, both at exactly same time, also when user skips to a certain bit in a song, video should skip to that bit as well, I'll use custom api made player for video so there would be no controls on video, only on soundcloud player.
It is almost as if I was using soundcloud custom player to control video. I'm struggling to find any resources on this anywhere, and would really like to know how to achieve this functionality.
javascript or jQuery solutions are preferable.
What makes it even more complicated is that I use SoundCloud's custom player to play songs:
http://developers.soundcloud.com/docs/custom-player#
And upload videos to Vimeo/YouTube (all done to decrease load on a website)
Check here: http://html5demos.com/two-videos
The sample is for syncing 2 videos, but with some hacking probably you can manage to sync audio and video.
Second, don't use Custom player, make your own HTML5 Audio element, check the SoundCloud API there is a property stream_url for every streamable track on soundcloud, just put that URL as source on your html5 audio tag.
Keep on mind that this will not work on Firefox and Opera for some time. Firefox will integrate native mp3 support in v20, not sure about opera

Categories

Resources