There are many solutions out there on how to make youtube/vimeo autoplay a video but they don't seem to work on a local video:
<template>
<section id="vision" class="vision">
<iframe src="videos/cgi_neutral.mp4?autoplay=1" allow="autoplay" allowfullscreen="true"></iframe>
</section>
</template>
This does not autoplay.
First, instead of using an iframe, use a <video> tag. (Because its self-hosted on your website, no need to use an iframe) To make it autoplay, just add the "autoplay" attribute.
For Example:
<video width="320" height="240" controls autoplay>
<source src="movie.mp4" type="video/mp4">
</video>
Related
in this HTML video tag, the autoplay is not working properly, I don't know what's the problem, here is the code and link which this will show the video.
<video controls autoplay id="header-video">
<source src="https://winmagictoys.com/wp-content/uploads/2019/07/hairdorables.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
this is the link with the video
https://winmagictoys.com/hairdorables/
Because Chrome don't allow autoplay media onload until user has interacted with the webpage. So you need to add an hidden autoplay iframe with silence sound.
<iframe src="silence.mp3" allow="autoplay" id="audio" style="display:none"></iframe>
You can get silence sound file from here https://github.com/anars/blank-audio/blob/master/250-milliseconds-of-silence.mp3.
So your html code should be
<video controls autoplay id="header-video">
<source src="https://winmagictoys.com/wp-content/uploads/2019/07/hairdorables.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<iframe src="silence.mp3" allow="autoplay" id="audio" style="display:none"></iframe>
Add muted. If you want to loop, you can use loop
video {
height: auto;
vertical-align: middle;
width: 100%;
}
<video autoplay loop muted controls>
<source src="https://winmagictoys.com/wp-content/uploads/2019/07/hairdorables.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
You have to mute the video to do auto play after changing a browser policy.
Autoplay only work if your video is muted.
<video controls autoplay id="header-video" muted>
<source src="https://winmagictoys.com/wp-content/uploads/2019/07/hairdorables.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
Try this
<video onloadeddata="this.play();" poster="poster.png" playsinline loop muted controls>
<source src="video.mp4" type="video/mp4" />
<source src="video.mp4.webm" type="video/webm" />
<source src="video.mp4.ogg" type="video/ogg" />
Your browser does not support the video tag or the file format of this video.
</video>
seems like u wanna run it when the page is loaded and that is easily done with js
1st set a function in ur body tag:
<body onload="pageloaded()">
in js: var video = document.getElementById(header-video);
function pageloaded() {
video.play();
}
I am trying to make a looping iframe with no controls which will loop.
<iframe
src="yeet.mp4" allow="autoplay" controls="false" loop="true" style="display:visible" id="iframeVideo">
But it has controls on and is not looping. How do i fix it?
Just remove the loop="true" and leave it as an attribute without value like so
<video loop src="yeet.mp4" autoplay>
Your browser does not support HTML5 Player
</video>
The best way to go about this is via Javascript
<video width="320" height="240" autoplay loop>
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
Your browser does not support the video tag.
</video>
loop ="true" is no longer supported, as is autoplay="autoplay"
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 have a website and I can't seem to figure out why the audio autoplay is not working.
I do not have errors in the console.
The code seems perfectly fine.
The website is www.galloautocenter.com.br
<audio class="audio" loop autoplay="autoplay" controls>
<source src="1.ogg" type="audio/ogg"/>
<source src="1.mp3" type="audio/mpeg"/>
</audio>
Your code looks fine but try it like this. Also, you don't specify what browser you're using. IE 8 and below do not support the <audio> tag or any attributes.
<audio class="audio" controls autoplay loop>
<source src="1.ogg" type="audio/ogg"/>
<source src="1.mp3" type="audio/mpeg"/>
</audio>
You can use this
<iframe class="audio" loop autoplay controls>
<source src="1.ogg" type="audio/ogg"/>
<source src="1.mp3" type="audio/mpeg"/>
</iframe>
or if you wanna play in background then,
<iframe class="audio" loop autoplay style = "display:none;">
<source src="1.ogg" type="audio/ogg"/>
<source src="1.mp3" type="audio/mpeg"/>
</iframe>
I had proper solution for you. You must do any of this two steps.
Check your browser as shown on images, you had blocked Autoplay in browser.
Auto-Play Policy Changes for macOS
Autoplay policy in Chrome
New Policies for iOS
Allow or block media autoplay in Firefox
Second thing you can add this code to you any button on page
<!-- Html part-->
<audio class="audio" loop autoplay="autoplay" controls id="audioelement">
<source src="1.ogg" type="audio/ogg"/>
<source src="1.mp3" type="audio/mpeg"/>
</audio>
// JavaScript part
var myAudio = document.getElementById("audioelement");
myAudio.play();
It will not work on window.onload = function () { } etc. It will work only on elements where you can interact (Buttons). Or you must allow it in the browser.
<!-- Html part-->
<button onclick="PlayAudio()">PlayAudio</button>
// JavaScript part
function PlayAudio(){
var audio = document.getElementById("audioelement");
audio.play();
}
Third thing you can make player elements visible and user can start or stop music by himself.
I currently have a flex video on my page that starts playing when the page is loaded.
How do I stop it from playing automatically?
<div class="flex-video">
<iframe width="300" height="300" src="video.mp4" frameborder="0" allowfullscreen></iframe>
</div>
If you embed your own video using iFrame then it will just play automatically. What you can do is to use a video player. You can also use the html video tag like this:
<video controls>
<source src="video.mp4" type='video/mp4'/>
</video>