The autoplay background hero on my website recently stopped working due to Chrome's new autoplay blocker. There is no audio so I'm confused as to why...please assist.
www.homecareassistancemontreal.ca
It stopped, because Chrome doesn't want any sound-generating videos to start without user's direct agreement (e.g. starting it). If you want video to autoplay you must ensure it is muted.
To do so you must add muted attribute to your <video>.
<video muted>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
You can read more about this here.
Videos must be muted.
<video muted>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
One issue I recently come across with Chrome was that if you're adding Video elements via JavaScript and you're setting your muted attribute to true. Google will block playback if you're using .setAttribute. Use dot notation instead.
Bad
VideoElement.setAttribute('muted', true);
Good
VideoElement.muted = true;
There is a smart hack that will autoplay video with sound without any problem:
navigator.mediaDevices.getUserMedia({ audio: true }).then(function (stream) {
video.play(); // play your media here
// stop microphone stream acquired by getUserMedia
stream.getTracks().forEach(function (track) { track.stop(); });
});
It will ask users for their Microphone permission (only first time in chrome) and they have to click Allow then you are permitted to play anything with sound. It works because as long as you are capturing anything then you are allowed to play everything and then stop the microphone stream when your media starts playing.
Related
I've been struggeling with this one for a long time and haven't found a solution yet.
I have a preloader on my friend's website which I built (he insist of keeping it)
the preloader is applied with the video tag like so:
<video muted autoplay loop playsinline preload frameborder="0" width="100" height="100">
<source src="/media/preloader.webm#t=0.25" type="video/webm">
<source src="/media/preloader.mp4#t=0.25" type="video/mp4">
<source src="/media/preloader.mov#t=0.25" type="video/quicktime">
</video>
on all browser that's working great, but on firefox mobile before video is playing I see this play button(for half a second):
https://i.stack.imgur.com/YRpal.png
What can I do to remove this annoying button for good?
I used this code but it only Run on Incognito.
video playing proper in private browser but not playing in chrome, mozila. how it can be solved please help me i tired in 8 days
<video controls muted>
<source src="https://www.w3schools.com/tags/movie.mp4" type="video/mp4">
<source src="https://www.w3schools.com/tags/movie.ogg" type="video/ogg">
Your browser does not support the video tag.
I tried to add default WordPress audio player in the normal HTML table. i want to display all the three below div in same line even in mobile devices. Any possible to do like this or any option to show only play button in audio player or using html5 audio player.
<table><tbody><tr>
<td><div>My audio</div></td>
<td><div>[audio src="http://cldup.com/uMFLx60B4V9/9j8WQE.mp3"]</div></td>
<td>Date</td>
</tr></tbody></table>
Replace your DIV
<div>[audio src="http://www.website.com/123.mp3"]</div>
with this HTML5 tag
<audio controls>
<source src="http://www.website.com/your_file.mp3" type="audio/mpeg">
</audio>
I am using HTML5 video player to play video constantly.Every thing is fine except the video navigation button displaying at the last of the video screen as soon as the mouse cursor moves over the video. I want to remove or hide it but not getting how to do it ..
Here is the HTML for the Video used..
<video id='video-player' autoplay="autoplay" loop preload='metadata' controls>
<source src="Video/1.MP4" type="video/mp4">
</video>
Please help me to remove the navigation bar from the last ..Thanks..
You can disabled controls via Javascript:
document.getElementById('video-player').controls = false
Or simply remove controls attribute:
<video id='video-player' autoplay="autoplay" loop preload="metadata">
<source src="Video/1.MP4" type="video/mp4">
</video>
i have a task to Upload video and play in different browser. i have tried playing a .Mp4 video on different browser
i have tried implementing the iframe like
<iframe id="frame1" runat="server" visible="false" style="height: 222px; width: 482px;">
</iframe>
and tried implementing it src at runtime as:
frame1.Visible = true;
frame1.Attributes.Add("src", objLessionsInfo.VideoPath.ToString());
It works at chrome. but not in firefox and IE
I also tried implemeting the video tag of HTML5 as
<video controls="controls" tabindex="5" class="Video">
<source src="Videos/2.webm" type="video/webm" >
<source src="Videos/2.ogv" type="video/ogv">
<source src="Videos/2.mp4" type="video/mp4">
Your browser does not support the <code>video</code> element.
</video>
the same works at Chrome but not in Firefox and IE as .mp4 works on chrome but firefox doesn't support. i have tried with .webm format it plays at firefox.
i am confuse with the concept of how to make a video support to a different browser or how to structure this task.
whether should i check browser and play a video for that particular browser ( in this case i have to upload a video in different browser)
or is there any universal plugin that can play a video in all browser
need help on it. Thanks for any assistance.
Try a HTML5 video plug-in, like
Mediaelementjs.com
videojs.com
those plug-ins are automatically taken care of your browser compatibilities. ".mp4" is the good enough. If you don't have other video extentions(.ogg or .webm), plug-ins will automatically convert it to FLASH object.