How to manage autoplay of video when browser blocks it: Backup script? - javascript

On my site I have a variety of videos: (1) HTML5 videos AND (2) Vimeo. Both are set to autoplay and no controls. I need to create an alternative for browsers/devices that block those options.
Is there a script to detect when the video is blocked, and a way to replace it with a linked image or text instead?
I also wonder if I can have an audio icon that allows you to turn on/off the audio?

Related

How do I force audio to autoplay on chrome and firefox?

I'm trying to add autoplaying music to a tumblr theme, but Chrome and Firefox both prevent autoplaying audio by default. How do I circumvent this?
Currently, to hear the autoplaying music, a user would have to change their personal browser settings to allow autoplay. Is there a workaround I can use to make the page play audio even if they have sound set to automatic (in Chrome) or autoplay blocked (in Firefox)?
Tumblr themes allow HTML, CSS, and Javascript, so I'd be happy for a solution using any of those. Ideally I would like my autoplay solution to allow multiple songs in a playlist, if possible.
I tried adding an invisible iframe, but that didn't work; I'm not sure whether it was the third-party audio player I'm using, or just that the iframe technique doesn't work at all anymore.
You can't circumvent auto-play from being blocked. There has to be some user interaction before the audio can play. This is the same for both HTML <audio> element as well as the web-audio API's audioContext
There's some reading about this on MDN Autoplay guide for media and Web Audio's API
You can try to play the audio on javascript onload.
Example:
HTML:
<audio controls id="horseAudio">
<source src="https://www.w3schools.com/html/horse.ogg" type="audio/ogg">
<source src="https://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
JavaScript:
window.onload = function (){
document.getElementById("horseAudio").play();
}
I do not think there is a way around autoplay being deactivated until there is user interaction. I was working on a project with similar problem and I decided to put a "begin" button on it to direct the user to click it. By clicking it (click event listener), they would have satisfied an interaction and it would then play my animations and audio.

Why do Youtube and many other video pages play on page load?

There are a lot pages like Youtube starting their videos with sound on load:
https://www.arte.tv/de/videos/091148-000-A/forschung-fake-und-faule-tricks/
Sound should be only allowed after click, whitelisting or if multiple videos on the page have been viewed before. This is not needed here.
What is the difference between these pages and a simple HTML5 Video element using autoplay attribute or Javascript videoElement.play()?
In case you are using Chrome there is another thing which influences if a page can autoplay media or not. It's the Media Engagement Index. It's basically a number which is larger if you used to play media on that particular page before. If it's large enough the page is allowed to autoplay.

Content script for pausing youtube videos

I am currently working on a google chrome extension that features a content script for altering youtube pages. I have done some work with altering the DOM already and all of that works, however, I have been looking for solutions to have the youtube video pause when the page loads.
I initially thought perhaps I could simulate a keystroke as the spacebar pauses youtube videos. I also tried using javascript to pause the video but I don't think it works with Youtube's custom video player.
Don't feel obligated to write any code for this but if someone could point me in the right direction I would be very grateful.
On the main page of a video, the HTML5 video element playing the video has a specific class, so you can target that; and as an HTML5 video element, it has the play() and pause() methods already.
document.querySelectorAll('.html5-main-video').forEach(vid => vid.pause());
That will pause all HTML5 main videos on the page. Helpfully enough, that's the same class used by the little autoplaying video on some channel pages, so it should work for those as well :)
(Don't worry about Flash videos; YouTube hasn't supported those for years now.)

Will it always be possible to play an audio file with the HTML5 <video> tag?

I've always noticed that you can play audio files with the HTML5 <video> tag. It seems really handy, considering that you only have to use 1 element to play videos and audio. An example would be this JSFiddle.
<video src="http://www.w3schools.com/html/horse.mp3" controls></video>
My first question is: Is this something that is here to stay, or is this a fluke that browsers plan on removing later on?
And if not, how do I know if a file is a video or audio using JavaScript? Because if I'm correct, can't .ogg files be video or audio? I'm trying to make a mediaplayer app for Chromebooks but I need to be able to differentiate audios from videos.

How to play sound with ZeroClipboard?

Is there a way I can play a sound each time a click is made using ZeroClipboard?
I have a custom sound made that I want to play on those events.
PS. I can't use an <embed> here because I don't want the ugly "allow this page to play with quicktime" alerts that the browser will throw. Is there a way I can put in my sound in ZeroClipboard?
You have two options as i see it.
1. you can create a html5 audio player that plays a sound on the click event
2. you can create a flash file that houses a mp3 player. using flashvars you can send events to flash telling it to play the sound. the benefit of this is true cross browser compatibility (if your worried about this). this is essentially how the web experience of grooveshark and rdio operate. (mainly because of the html5 audio vulnerability)

Categories