I have an HTML5 video tag on a home page of a website. But when I check the website on browsers like chrome and firefox, the video is freezing even though it is set to autoplay.
Video tag code:
<div class="video-container fullscreen fixed video-container-overlay hide-on-mobile">
<video muted="muted" autoplay preload loop>
<source src="my_video.mp4" type="video/mp4" />
<source src="my_video.mp4" type="video/ogg" />
</video>
</div>
Any help is appreciated. Thanks.
Related
I am using html video player. I want to show control bar always ..currently it shows on hover but i want it should be display always not only on hover.
Include the controls attribute to the video player
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
For me adding the control tag always shows the controls in Chrome. Are you using other browser like Safari?
<video width="320" height="240" controls>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
I am trying to use a video with sound in the video tag but the sound is not playing when I run it in browser ,if I remove the muted attribute video doesn't play .The video directly works in browser if you open the link.Please help
<div class="background-wrap">
<video preload="auto" autoplay="true" loop="loop" muted>
<source src=http://techslides.com/demos/sample-videos/small.mp4 type="video/mp4"> </video>
</div>
I have added a video to my site. Added code for autoplay in the video. It works fine on Firefox, but not auto playing in Chrome.
Here is the code I have added to show the video:
<video id="vid" autoplay="autoplay" loop="loop" width="100%" height="100%">
<source src="https://example.com/video.mp4" type="video/mp4" />
</video>
Also, when I face the issue, I searched for this and found a script. Here is what I have tried:
<script>
document.getElementById('vid').play();
</script>
But still, the video just below menu is not auto-playing on Chrome.
I have checked the Chrome autoplay guidelines and my video is not violating that. I have a muted video but still not auto playing.
Any workaround for that?
Thank you in advance.
If think you need to add playsinline autoplay muted loop into you'r video tag.
autostart="false"
<video id="vid" autoplay="false" loop="loop" width="100%" height="100%">
<source src="https://example.com/video.mp4" type="video/mp4" />
</video>
or
https://www.groovypost.com/howto/disable-autoplay-videos-on-sites-in-google-chrome/
try this
If you want auto play option on then make this and your chrome browser should be upper than 4.0 then this code will work.
<video autobuffer controls autoplay>
<source id="mp4" src="../vid/coolvideo.mp4" type="video/mp4">
</video>
Is there anyway to autoplay a .mp4 video file on page load for iPhone and Android Smart Mobile Devices. The above works great in the browser, but struggles hard on smart mobile. Is there any other HTML5 or even If I must JS solutions for iPhone (without loading a bloated third-party resource, ideally). Plain javaScript or plain jQuery, HTML5 solutions ideal.
It works only if you add muted and playsinline attributes
<video autoplay playsinline muted loop>
<source src="cover.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
Check this link
which says:"autoplay is disabled to prevent unsolicited cellular download"
I tried the following HTML for displaying a video. But I am not able to see video.
Its only loading the video, but not playing it. I'm using 'video.js' a JavaScript and CSS library which manipulates the video tag for a consistent UI.
If I am missing something please tell me.
Here is my code:
<video id="my_video_1" class="video-js vjs-default-skin" controls
preload="auto" width="640" height="264" poster="my_video_poster.png"
data-setup="{}" >
<source src="scroll_index.mp4" type='video/mp4'>
<source src="scroll_index.webm" type='video/webm'>
</video>
I have included above code in body tag and also included references to video.js and video.css in the head tag.
I don't know what browser you are testing with, perhaps it doesn't support the html5 video tag, but regarding your comment, I don't think so :)
However, you have neither set the controls attribute to make the control panel appear so user can manually start (and control) the video, nor set the autoplay attribute so that the video will play as soon as it is ready, so I suggest adding these attributes:
<video id="my_video_1" class="video-js vjs-default-skin" controls
preload="auto" width="640" height="264" poster="my_video_poster.png"
autoplay="autoplay" controls="controls"
data-setup="{}">
<source src="scroll_index.mp4" type='video/mp4'>
<source src="scroll_index.webm" type='video/webm'>
</video>