My video header wont't play when the page loads - html

I have a video in my header, however, it will only play once you click on the home link in the menu to go to the /index.html. It will not play when the page first loads. I have also tested to see if manually entering /index.html at the end of the url works, it does not. The code I am using to play the video is:
<video autoplay loop>
<source type="video/mp4" src="images/untitled.mp4" />
<source type="video/webm" src="images/untitled.webm" />
</video>
And my website is http://richardgao.5gbfree.com (source code can be checked)
How do I get the video to play automatically when I first load the page?
Thanks


have you tested it in chrome? for chrome you need to switch off sound:
<video autoplay muted loop> ... </video>
and at least on some versions of safari autoplay doesn't work at all. you might start your vid using jquery, something like:
<video id="video" ...> ... </video>
$(document).ready() {
$('#video').play();
}

Related

Video is not playing automatically in React JS

Hy, I want to play videos automatically without controls. because I'm using it as a website banner background. Please point out what I have done wrong. I'm using chrome browser.
<video
autoPlay
// playsinline
autoplay
muted
loop
className="stakingNft"
>
<source src="\assets\video\landing.mp4" type="video/mp4" />
</video>
--------------------------------
<video
autoPlay
playsinline
autoplay
muted
loop
className="stakingNft"
>
<source src="\assets\video\landing.mp4" type="video/mp4" />
</video>

Here is the codesandbox
autoPlay might be defined twice and in small case that's the reason I think.

Looks like there's issue in path of video.
You used backward slash instead of forward slash.
Here is the reference: https://stackblitz.com/edit/react-xbfng5?file=src%2FApp.js

HTML5 - how to autoplay video tag on mobile browser?

this screenshot on mobile, the video doesn't autoplay even when i click on the play arrow button(which shouldn't even be there) still doesn't play at all, its like a picture but on desktop it's perfectly fine.
I tried this code
<video preload autoplay loop muted defaultMuted playsinline>
<source src="video2.mp4" type="video/mp4">
</video>
but still no

Chrome : my video start in autoplay when accessing the page, but not when reloading the page

All is in the title. When i access a page with a video tag, autoplay works fine.But when i reload the page, the video dont start.
What can i do to auto start the video ?
<video autoplay loop poster="the_poster.jpg" id="bgvid">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
<source src="video.ogv" type="video/ogg">
</video>
i try to add a ?ts=timestamp.
i try also to start the video with JS but i get a "promise error"

I've had same issue here and it solved by adding muted attribute to video tag.
For Google Chrome, according to this update note, autoplay with sound needs some conditions. However, Muted autoplay is always allowed.

HTML5 Video autoplay not working

I have been looking into how to implement HTML5 videos as a
background
video on web and mobile, below is the following code-
it displays but not autostarts, this is the problem
<video width="100%" controls autoplay>
<source src="video/342125205.mp4" type="video/mp4">
<source src="video/342125205.ogg" type="video/ogg">
</video>

Depending on your Chrome version you might get the new implementation of video autoplay rules:
Muted autoplay is always allowed.
Autoplay with sound is allowed if:
User has interacted with the domain (click, tap, etc.).
On desktop, the user's Media Engagement Index threshold has been crossed, meaning the user has previously play video with sound.
On mobile, the user has added the site to his or her home screen.
Top frames can delegate autoplay permission to their iframes to allow autoplay with sound.
Taken from: https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
So you can try it muted:
<video width="100%" controls autoplay muted>
<source src="video/342125205.mp4" type="video/mp4">
<source src="video/342125205.ogg" type="video/ogg">
</video>

I had similar issues with autoplay not having any effect regardless of usage of muted. Unexpectedly I had success when specifying autoplay as camel case autoPlay

In React you need to add the attributes of tags in camelCase. So in this case It has to be autoPlay.

It's too old thread now. But still I have a suggestion if you want to use.
Instead of the autoplay attribute(because other told it's only work always if it also has muted) you could use one thing:-
function playVideo()
{
document.getElementById("vid").play();
}
a very simple function in javascript. Make sure to give your video Id 'vid' or change it here. Video Example
<video id="vid" loop controls>
<source src="Videos/vid.mp4" type="video/mp4">
</video>
and in body tag write this:-
<body onpageshow="playVideo()">
It worked for me. Maybe for you too

Make sure you check browser permissions. If the site is not secure (http), then autoplay on websites will be disabled.
To make changes you can click on the left side of the Address Bar of the browser and click Allow audio and video.

Just change autoplay as camel case autoPlay
<video controls autoPlay loop muted>
<source src={myvideo} type="video/mp4"/>
<source src={myvideo} type="video/ogg"/>
Your browser does not support the video tag.
</video>

Had a similar issue. The fix is to camelCase autoPlay.
So the following should work:
<video autoPlay muted>
<source src="video/342125205.mp4" type="video/mp4">
<source src="video/342125205.ogg" type="video/ogg">
</video>

video in html not working in safari browser

I have wordpress home page where I added video tag.
This is source code.
<video id="video1" width="auto" autoplay loop controls="false">
<source src="Browser#2x.mp4" type="video/mp4">
</video>
Here, what the important is controls="false" and autoplay loop,
I want to hide controls and autoplay with looping.
It work well in chrome but not working in safari.
It weird at first I open it on safari it works but if I reopen, it doesn't.
I want to know how to solve this and if I have to use other video file type, what should I use?

Try this:
<video loop autoplay controls="true" id="video1" src='Browser#2x.mp4' type='video/mp4'></video>