On the front page of this website, there is a sticky post titled "National Radio Advertising Campaign ForACURE" which contains the following HTML:
<embed type="audio/x-wav" src="http://www.foracure.org.au/wp-content/uploads/FOR-A-CURE-RADIO-Daniel-45sec.mp3" autoplay="false" height="20" width="200" autostart="false">
However, when I load this website in Chrome v31.0.1650.57 m, the audio plays automatically, even though both autoplay and autostart are set to false.
Is there a better cross browser method of embedding this audio?
Chrome doesn't seem to understand true and false.
Use autostart="1" and autostart="0" instead.
Source: (Google Groups: https://productforums.google.com/forum/#!topic/chrome/LkA8FoBoleU)
<video width="320" height="240" controls autoplay>
<source src="movie.mp4" type="video/mp4"> Your browser does not support the video tag.
</video>
Remove autoplay
if you want to disable auto playing video.
Just set using JS as follows:
<script>
var vid = document.getElementById("myVideo");
vid.autoplay = false;
vid.load();
</script>
Set true to turn on autoplay. Set false to turn off autoplay.
http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_av_prop_autoplay
None of the video settings posted above worked in modern browsers I tested (like Firefox) using the embed or object elements in HTML5. For video or audio elements they did stop autoplay. For embed and object they did not.
I tested this using the embed and object elements using several different media types as well as HTML attributes (like autostart and autoplay). These videos always played regardless of any combination of settings in several browsers. Again, this was not an issue using the newer HTML5 video or audio elements, just when using embed and object.
It turns out the new browser settings for video "autoplay" have changed. Firefox will now ignore the autoplay attributes on these tags and play videos anyway unless you explicitly set to "block audio and video" autoplay in your browser settings.
To do this in Firefox I have posted the settings below:
Open up your Firefox Browser, click the menu button, and select "Options"
Select the "Privacy & Security" panel and scroll down to the "Permissions" section
Find "Autoplay" and click the "Settings" button. In the dropdown change it to block audio and video. The default is just audio.
Your videos will NOT autoplay now when displaying videos in web pages using object or embed elements.
Just change the mime type to: type="audio/mpeg", this way chrome will honor the autostart="false" parameter.
I had assumed that autoplay="false" applied to all other browsers, besides Chrome, so I added
autoplay="false" autostart="0"
to each video tag. With six videos on the page it was a tower of bable (didn't work).
The solution is to remove autoplay entirely and just add
autostart="0"
to each video tag. This worked for Chrome, Firefox, and MS Edge.
Apparently the lack of an autoplay attribute is sufficient for the other browsers.
This will prevent browser from auto playing audio.
HTML
<audio type="audio/wav" id="audio" autoplay="false" autostart="false"></audio>
jQuery
$('#audio').attr("src","path_to_audio.wav");
$('#audio').play();
<embed ... autostart="0">
Replace false with 0
I removed "autoplay" and "autostart", it worked
This is my code:
<video width="427" height="240" controls >
<source src="/abc.mp4" type="video/mp4">
</video>
add attribute controls to video tag. It worked on my code
the below codes helped me with the same problem.
Let me know if it helped.
<!DOCTYPE html>
<html>
<body>
<audio controls>
<source src="YOUR AUDIO FILE" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</body>
</html>
The problem is your plugin. To solve this is to only enter this address:
chrome://flags/#enable-NPAPI
Click activate NPAPI, and finally restart at the bottom of the page.
Related
HTML5 video player has been showing controls only in iOS 12.x.x even when the controls are set to false in video tag but all other browsers are working fine and don't show the controls.
The scenario is that whenever page loads we autoplay the video on banner but if battery saver feature is turned on then it will not autoplay the video shows the play button with initial thumbnail (only in iOS 12.x.x) while in other browsers it shows the initial thumbnail of the video without any play button.
My code looks like this:
<video id="header-video" autoplay="true" controls="false" playsinline="true" muted="true" loop="true">
// sources here
</video>
I am looking for the solution to hide this play icon (shown in attached image) but if that's not possible then is there any solution through which I can know that power saving mode is turned on and hide the video (because I have a background for backward compatibility).
I've given a look as well, and it seems as many CSS and JavaScript solutions out there don't work anymore, because since iOS 12 there is a new way of handling videos (https://www.reddit.com/r/apple/comments/8p4tpm/ios_12_to_include_custom_html_video_player/).
Now I came up with this idea, which as a purist I don't like, but it might do the trick: A video thumbnail (as image) overlayed over the video, that gets hidden, once the video is started.
You could have a standard thumbnail with title, or dynamically generate it (see http://usefulangle.com/post/46/javascript-get-video-thumbnail-image-jpeg-png as an idea).
Hope this helps!
I know this was asked over one year ago but I wanted to share the solution for others.
What I did was, I removed the autoplay attribute from the video-element and because I still wanted it to behave as with the attribute I added following js.
const video = document.getElementById('video-input');
video.play();
Setting autoplay to false and controls to false did work for me:
<video
src='xxxx'
muted
className='landing__empty-video'
loop
playsInline
autoPlay={false}
controls={false}
preload='auto'
type='video/mp4'
/>
Bear in mind this was React, in html case it would be "false".
After trying several solutions on the internet and without success, I eventually managed to hide the video interface elements in autoplay when the save mode is enabled.
document.getElementById("hello").setAttribute("autoplay", "autoplay");
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<video id="hello" playsinline preload muted loop>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
</body>
</html>
https://jsfiddle.net/joelsilvaaaaaa/yb5s23xq/3/
I'm trying to create a HTML5 video background for a website but I cannot seem to get it to work on Safari. Does anyone have any ideas?
Here's the HTML video tags I'm using
<video id="bgVideo" class="bg__video" autoplay loop>
<source src="./vid/Sample_Vid.ogv" type="video/ogv">
<source src="./vid/Sample_Vid.m4v" type="video/m4v">
<source src="./vid/Sample_Vid.webm" type="video/webm">
</video>
I've tried adding a script tag under it to start playing the video with JS but that's not helped either.
document.getElementById("bgVideo").play();
When I inspect the page it looks like the video element is taking up space in the DOM but it's just invisible basically.
I've also tried opening the .m4v files directly in the browser & it plays it there so I assume the file isn't an issue. These were all generated from easyhtml5video.com
I also have the Modernizer script to detect if autoplay is enabled for the browser which I've had to alter based on a pull request in the github repo as it was always saying that Safari doesn't support autoplay otherwise.
The test site I've setup is http://treetopia.neilnand.co.uk/
The supported video format for Safari is mp4 with H.264 encoding. (you have a .m4v extension and file type)
If video does not has sound - use
document.getElementById("bgVideo").volume = 0;
Safari don't allow autoplay for videos with sound.
Hi.
I have a song, that I would like to have looped, but I cant really figure out what the problem is. Currently it's only playing a single time and then stops with no loop.
The code is as follows
<embed name="bosse" src="bosse.mp3" loop="true" autostart="true" style="visibility:hidden;"/>
Try the HTML5 Audio control:
<audio controls loop autoplay hidden>
<source src="bosse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
In the first tag, it specifies loop, autoplay, and hidden. The Your browser does not support the audio element. part is for if the audio controls is not supported by the browser, however, Firefox, Chrome, IE and Safari, as well as Opera all support this, according to W3Schools.
For some reason, my HTML 5 element is not working for me on Mozilla Firefox.
The control buttons of the video do show up, but when I press play nothing happens.
It works perfectly on chrome though. Here is my code:
<video width="100%" controls="controls">
<source src= "video/myvideo.mp4" type="video/mp4">
<source src="video/myvideo.webmhd.webm" type="video/webm">
</video>
Can you help me find out the reason why it is not working please?
EDIT: My problem is that if I press the play button the video won't play... but if I press the time bar, the video plays. How can I make it start by pressing the play button?
The controls attribute for the <video> tag is a boolean. Just use
<video width="100%" controls>
or
<video width="100%" controls="true">
mozilla don't support mp4
you can see it here
https://developer.mozilla.org/en-US/docs/Media_formats_supported_by_the_audio_and_video_elements
Convert video to .ogg and include that as well.
Chances are video format is not supported by mozilla. Just renaming the file as that video type might not be right.
Check the video format supported by mozilla -
a link!
I am having an issue with getting HTML5 video to autoplay on load into Fancybox.
I have an HTML5 video loaded into a div that is hidden and therefore can't have autoplay enabled in the tag. I then call it one an image click with a Fancybox inline and a ref to the div.
Everything works as it should except I just want the video to play when then Fancybox opens it?? Any ideas would be appreciated.
You can autoplay the video as soon as it is opened in fancybox. The problem with the inline video is that if you close it then it will pause and the next time you open it in fancybox, the video will be open in the same place/track it was when closed ... and it won't "auto-resume" (the action is autoplay on start).
Anyway, this option should do the trick:
'onComplete': function(){
$("#myVideo").find('video').attr('autoplay','autoplay');
}
#myVideo is the ID of the DIV, which contains the video tag.
Since you are using the inline method, it would worth to have a look at one existing bug and its workaround here.
Eventually, you may prefer to use the API option 'content' instead, to avoid the inline type issues:
'content': '<video autoplay="autoplay" preload="none" poster="path/image.jpg" width="640" height="360" controls="controls"><source autoplay="autoplay" src="path/video.ogg" type="video/ogg">your browser does not support the HTML 5 video tag</video>'