here is my code
<video loop="true" width = "700px" autoplay muted>
<source src="test5.mp4" type="video/mp4">
</video>
<video loop="true" width = "780px" autoplay muted>
<source src="video-copy.mp4" type="video/mp4">
</video>
<audio autoplay>
<source src="video-copy.mp3" />
</audio>
<audio autoplay>
<source src="test5.mp3" />
</audio>
for some reason the audio only plays half of the time ive tried on google chrome and opera but both same results could anyone tell me why
First off, where do you need this code to work ? Is it on a local HTML or PHP file, or on a live website ?
If you want to implement this code on a live website, do you have an SSL contract linked to your domain name (meaning is the URL starting with https:// and not http://)
I read that for security reasons, most browsers block the autoplay of audios and videos if the website is not running with a SSL contract (because the website is not secured).
Related
I am trying to make the video in my website full screen but viewing it on iphone it redirect me to the video, is there a way play the video on same page?
<video poster="poster.jpg" preload autoplay loop>
<source src="vimeo.mp4" type="video/mp4">
To get the best experience of this website please consider updating your web browser
</video>
~
<video <video poster="poster.jpg" preload autoplay loop playsinline>
<source src="vimeo.mp4" type="video/mp4">
To get the best experience of this website please consider updating your web browser
</video>
you can simply add the "playsinline" attribute in the video tag, you may also include "webkit-playsinline"
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.
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>
I've stumbled upon this problem, while coding my project.
I have this html that plays a video:
<video id="video" autoplay="autoplay">
<source src="/videos/sample.mp4" type="video/mp4"></source>
</video>
Unfortuanately it is not starting the video.
However if i set the source of the video to be taken from the web (e.x.) http://techslides.com/demos/sample-videos/small.mp4
It plays the video correctly. Does anybody know what could be a trouble in here.
Try this
<video width="720" controls autoplay loop>
<source src="sample.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
I have the different video files in the HTML <video> tag like so :
<video autoplay="" id="video" preload="auto" style="display: inline-block;">
<source src="../register.mp4" type="video/mp4">
<source src="../register.webm" type="video/webm">
<source src="../register.ogv" type="video/ogg">
</video>
But for some reason, in chrome it doesn't work. It only works if I get rid of the MP4 source, but then it doesn't work in IE... not sure what's going on here or the best way to approach this.
I have already gotten passed the step of creating video files for all browsers as suggested in this question, but it has not solved my issue.
The order in which you list the sources matters. In Chrome, once the .MP4 video fails to load, the other sources don't even bother trying to load, so just by putting the .MP4 source as the last source element it fixed everything.
<video autoplay="" id="video" preload="auto" style="display: inline-block;">
<source src="../register.webm" type="video/webm">
<source src="../register.ogv" type="video/ogg">
<source src="../register.mp4" type="video/mp4">
</video>