HTML video auto play not working - html

Here is my code, but the video is not looping continuously.
<iframe src="files/media/video/moped.webm?&autoplay=1&loop=1&title=0&byline=0&portrait=0" width="400" height="height: 722.375px;" frameborder="0" ></iframe>
I have tried to set autoplay to 0 and 1, but this has not changed anything.

You can use the <video> element instead:
<video width="100%" height="100%" autoplay loop>
<source src="files/media/video/moped.webm" type="video/webm" />
Your browser does not support the video tag.
</video>

try using
?rel=0;&autoplay=1
and be careful with a proper value for heigth
<iframe src="files/media/video/moped.webm??rel=0;&autoplay=1&loop=1&
title=0&byline=0&portrait=0"
width="400" height="722" frameborder="0" ></iframe>

Related

HTML Video autoplay is not working on iphones

<video width="100%" playsinline preload="metadata" style="object-fit: cover;height:100%" muted="true" autoplay="true">
<source src="{{video_url}}" type="video/mp4"/>
</video>
On a Shopify site, I have a section with Video Background without audio (also muted). playsinline attribute was added.
Does anyone know how to fix this problem?

HTML autoplay not working in Chrome and Safari

My aim is to autoplay a song on a website in Chrome and Safari, but it is not working. I found a trick to use an iframe with a silence.mp3 before playing the audio tag, but it also did not work.
My code:
<iframe src="silence.mp3" allow="autoplay" id="audio" style="display: none" type="audio/mp3"></iframe>
<div style="position: fixed; left: 0px;top: 0px;">
<audio id="vid" controls loop="loop" autoplay="autoplay" type="audio/mp3">
<source src="song.mp3">
Your browser does not support the audio element.
</audio>
</div>
Is there anything I can do about that?
You cant - User interaction is needed to allow play/autoplay media with sound.
Add muted attribute
<audio id="vid" controls loop="loop" autoplay="autoplay" type="audio/mp3" muted>
...
</audio>
Audio will start to play only without the sound. Then allow user to switch sound on with JS.
EDIT
It seems that this is no longer working with audio tag
Tested with video
<video controls muted autoplay>
<source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-13.mp3"/>
</video>

In html page video tag is not playing on page load

Here is my code of video tag but it is not working properly on page load, should i need any preloader to autoplay the video on page load`
<video id="video_player" width="100%" autoplay="1">
<source src="video/banner-video1.mp4" type="video/mp4">
</video>
If you just want to autoplay video:
<video id="video_player" width="100%" autoplay>
<source src="video/banner-video1.mp4" type="video/mp4">
</video>
Here is more about it: https://www.w3schools.com/tags/att_video_autoplay.asp

Is there code to display alternate webpage if visiter's connection is very poor?

On the homepage of our website, we have a video that autoplays which you can click to enter the main site.
However when some people visit the website it does not load due to poor connection, and that page is left blank so they cannot access the site. Is there a way to detect if connection is slow and show an alternate text or webpage?
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<style>
html{
width:100%;
height:100%;
}
body {
background: black;
position:fixed;
width: 100%;
height: 100%;}
</style>
<audio autoplay>
<source src="http://files.cargocollective.com/598079/vape-sound_mixdown.mp3" type="audio/mpeg">
</audio>
<body bgcolor="black">
<video playsinline id="video1" width="100%" autoplay onended="run()" poster=“650mAh”>
<source src="img/lores/vape_text_openingSMALLER.mp4" type="video/mp4">
<source src="img/lores/vape_text_openingSMALLER.ogv" type="video/ogg">
<source src="/img/lores/vape_text_openingSMALLER.webm" type="video/webm">
650mAh
<object data="movie.mp4" width="100%">
<embed width="100%" src="movie.swf">
</object>
</video>
<a href="/650mah.html">
<video playsinline id="video2" width="100%" poster="http://650mah.com/img/650loop.gif" loop>
<source src="img/lores/vape_text_loopSMALL.mp4" type="video/mp4">
<source src="img/lores/vape_text_openingSMALL.ogv" type="video/ogg">
<source src="img/lores/vape_text_loopSMALL.webm" type="video/webm">
<object data="loop.mp4" width="100%" >
<embed width="100%" src="loop.swf">
</object>
</video>
</a>
<script>
$( "#video2" ).hide();
function run(){
$( "#video1" ).hide();
$( "#video2" ).show();
document.getElementById("video2").play();
};
</script>
I haven't tried it myself, but it's possible with JavaScript to determine the internet speed. Take a look at the link below.
How to detect internet speed in JavaScript?
If the internet connection is too slow, you could redirect to a different page using JavaScript/jQuery
One other approach is that you can have a single web page and display an image or text as an alternative until the video has loaded.
The HTML5 'canplaythrough' event is fired when the browser has the video donbwloaded and play it all:
https://developer.mozilla.org/en-US/docs/Web/Events/canplaythrough
When this fires you can replace the image or text with the video.

iframe video autoplay=false

I have a video on my site and it continues to autoplay. The code currently reads:
<div class="cc-video-wrapper">
<iframe src="links/Clean-Energy-Overview-Wind Facts.mp4" type="video/mp4" width="500" autoplay="false" height="322" frameborder="0"
lowfullscreen mozallowfullscreen allowfullscreen>
</iframe>
</div>
So far, it continues to autoplay. I have tried autoplay="0", preload="false", autostart="false" and am running out of ideas. Has anyone experienced this problem before?
You can use the video tag:
<video width="500" height="322" controls>
<source src="links/Clean-Energy-Overview-Wind Facts.mp4" type="video/mp4">
</video>