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>'
Related
I want to insert a video into my HTML page with the video tag. Here is my markdown (I am developing an ASP.NET MVC application, and symbol ~ means project root):
<video controls>
<source src="~/show.mp4" type="video/mp4">
Cannot load the video.
</video>
But it just shows white space with video controls. Here is a screenshot:
And the slider in the video controls does not move (i.e. the video is not playing), although the "pause" icon is shown, which should mean: the video is playing.
What I have tried
Adding src attribute to video tag.
Opening the menu in the right of video controls panel and clicking "Download". It downloaded my video. When I played it with Windows Media Player, it showed exactly what I have recorded.
Removing type attribute from source tag.
Removing source tag (and leaving only src attribute in video tag).
Moving the slider in video controls panel. Still white space.
Setting controls="controls" in video tag.
Surfing the Internet (including Stack Overflow).
Now I asked my own question.
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/
MIME type is accepted, I've checked.
Here is how it is looking like: https://trello-attachments.s3.amazonaws.com/5441bde46b6fcb86daf55d73/594x351/122b8cad9f5824c44fa25fb242569312/upload_5_14_2015_at_5_10_18_PM.png
Here is the website in question (go to animation in menu): www.ivocunha.com
Here is the code I'm using:
<video width="100%" height="100%" controls autoplay loop class="bl-box fancybox-effects-d" title="Walk">
<source src="img/animation/walk.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
Why doesn't it autoplay?
Firstly you are using section tags to wrap your video in you should not use sections for content that does not have a heading. It is not a wrapper.
as for your video remove auto play because they are auto playing by the looks of it but using auto play within your video tag triggers auto play from page entry and they are all playing at the same time.
you then want to use your jquery and create an on hover that will play your video and pause it on exit. your code doesnt seem to be doing that at all on your site instead its only trigering for points.
I would give this a read over so you can see how to use the api properly.
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video
My video poster appears in Chrome / Firefox but is not displaying in Safari. My play button appears and I can play the video, but the poster is a no show. Mark up is below. Any thoughts?
<video id="video" controls poster="/assets/img/background/simon.jpg">
<source src="/assets/img/video/want-it.webm"
type='video/webm;codecs="vp8, vorbis"'/>
<source src="/assets/img/video/want-it.mp4"
type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"'/>
<object data="" type="" class="simon">
<img src='/assets/img/background/simon.jpg' title="Your browser does not support video">
</object>
</video>
Thats coz its the default safari behaviour they load the video as soon as its first frame is ready to play. one thing that temporarily shows the poster is to set the preload attribute to none on the video tag. preload="none" but again the poster will go away as soon as the video disappears. Following is a hacky way I did it in React but you can adjust it for any framework:
First I detect whether the browser is safari or not using the following in a useEffect:
var isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
then I set it inside a state object.
If safari is true then instead of displaying the video i simply display an image with that poster as its source. Then I have an onClick handler on the image tag itself clicking on it will change the above state back to false and hence image component will stop showing and video will be shown instead. Now one more problem you would have to tackle here is that on image click the image will disappear and video will appear and you'll then have to click the video again for it to play. That's bad UX. so for that you can simply attach a ref to the video and inside the click handler for Image after you set the state simple do :
videoRef.current.play()
This will start playing the video as well.
I know this is a hacky solution so don't come at me but it was the only thing i could do to get it work.
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.