Menu icon Foundation
How to stop video autoplay?

I'm having a video that is not uploaded to any broadcasting medium. I have it in my local drive.
I'm using it in the site I'm creating.

I've embedded it with Flex-video and the video starts to play automatically as soon as the page loads.
How to I control this ?

flex-videoVideoauto playcontrols

I'm having a video that is not uploaded to any broadcasting medium. I have it in my local drive.
I'm using it in the site I'm creating.

I've embedded it with Flex-video and the video starts to play automatically as soon as the page loads.
How to I control this ?

Gabriel Martin almost 5 years ago

You'd want to do this with JS:

 function loadVideo(id)
{
var video = document.getElementById('video');
var mp4 = document.getElementById('mp4');
d = new Date();

mp4.src = "vidz/" + id + d.getTime();

video.load();
}

and then add this to a click event listener:

video.play(); 

And this should do the trick to add a pause button, if you'd like to go that route:

<button id="vidpause">Pause</button>

Then some JavaScript to the bottom of the page:

var vid = document.getElementById("bgvid");
var pauseButton = document.getElementById("vidpause");
function vidFade() {
vid.classList.add("stopfade");
}
vid.addEventListener('ended', function() {
// only functional if "loop" is removed
vid.pause();
// to capture IE10
vidFade();
});
pauseButton.addEventListener("click", function() {
vid.classList.toggle("stopfade");
if (vid.paused) {
vid.play();
pauseButton.innerHTML = "Pause";
} else {
vid.pause();
pauseButton.innerHTML = "Paused";
}
})

Izzy over 3 years ago

Hi Hari, have you been able to make this work?

Gabriel, I do not really know JS but I tried doing this-

 

<div class="flex-video widescreen"><iframe width="1920" height="1080" src="./img/video.mp4" frameborder="0" allowfullscreen></iframe></div>
</div>

<script>
function loadVideo(id)
{
var video = document.getElementById('video');
var mp4 = document.getElementById('mp4');
d = new Date();

mp4.src = "./img/" + id + d.getTime();

video.load();
}
</script>


<input type="button" id="myBtn" value="click">

 

but this does not work...

How would I do what you suggested-

and then add this to a click event listener:

video.play(); 

 

Thanks both in advance!