HTML video autoplay wont stop - html

I am using a HTML video TAG to be able to show video on my website, I had enabled the function autoplay, but then the video would play on page reload. So I removed the autoplay function and I have:
<video width="600" height="315" style=" margin-bottom: 20px;" controls >
<source src="video/handi.mp4" type="video/mp4">
</video>
<script>
$('body').on('hidden.bs.modal', '.modal', function () {
$('video').trigger('pause');
});
</script>
This works well, but now when U open a modal to watch a video it will play but you have to click on start playing button and when u close the modal it will pause the video when you stopped it, if you open the same modal you can resume the video from when it was stopped.
Is there any function like auto play that when you open the modal it opens it and the video is played automatically and also I want to know if there is any reload function that when you u open any modal to watch the video it starts from the beginning not from where you stopped t.

With Refernce to the answers in this page,i've tried this for you..
Please try it..
HTML
<div id="simpleModal" class="modal">
<video id="videoContainer" controls autoplay width="560" height="315">
<source src="video/arch_1.mp4" type="video/mp4">
</video>
Close
</div>
Script
$(document).ready(function(){
$("#showSimpleModal").click(function() {
$("div#simpleModal").addClass("show");
$("#videoContainer")[0].play();
return false;
});
$("#closeSimple").click(function() {
$("div#simpleModal").removeClass("show");
$("#videoContainer")[0].pause();
return false;
});
});

Hi according to w3schools.com if you remove the autoplay, it will stop the auto play. Here's the link to the school and code.
http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_video_autoplay
<!DOCTYPE html>
<html>
<body>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</body>
</html>

Related

set fallback for <video> HTML tag if the video link is not working

I wanna set a fallback image or message if the video link is deleted or not working.
I'm not looking for a fallback image if the browser does not support tags,
is there an easy way to do so? I'm working on a page with so many videos,
thought I'd send an HTTP request using JS for each video but I might end up sending so many.
This method does work if you provide an invalid link but will will display the error message if the browser does not support the video
<video controls>
<source src="myVideo.webm" type="video/webm">
<source src="myVideo.mp4" type="video/mp4">
<p>
Your browser doesn't support HTML video. Here is
a link to the video instead.
</p>
</video>
reference from https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video
Update: solution using javascript FETCH API
<body>
<video controls>
<source class="link" src="<video link>" type="video/webm">
<p>
Your browser doesn't support HTML video
</p>
</video>
<p class="videoalt" style="display: none;">
Error: video link not found
</p>
<script>
const link = document.querySelector('.link')
const video = document.querySelector('video')
const videoalt = document.querySelector('.videoalt')
const linkSrc = link.src;
fetch(linkSrc).then((response) => {
if (!response.ok) {
video.style.display = 'none'
videoalt.style.display = 'block'
}
})
</script>
</body>

How can I make vimeo videos responsive for html email?

I want my html email videos to be responsive. So what will be the procedure for that? Please let me know.
In your HTML file , make div and paste below code there...
<object class="responsiv-video">
<video autoplay >
<source src="file_name.mp4" />
<source src="file_name.3gp" />
</video>
</object>
it is to my understanding that you want to embed a video on your site that:
Is responsive
Allows both autoplay and loop
Uses Bootstrap
This Demo Here should do just that. You have to place another embed class outside of the object/embed/iframe tag as per the the instructions here - but you're also able to use a video tag instead of the object tag even though it's not specified.
<div align="center" class="embed-responsive embed-responsive-16by9">
<video autoplay loop class="embed-responsive-item">
<source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4>
</video>
</div>
Responsive mp4-video

Multiple HTML5 Video Tags on 1 page

I have a web page where the top of the page is a fullscreen div with a background of a video. I also have, further down the page another video (for testing purposes the same video).
I have an interesting scenario to figure out...
Video 1 (at the top of the page) works perfectly on Firefox, Safari, Chrome, IE
Video 2 (half way down the page) works great on Firefox, Safari and IE. NOT Chrome
Due to the nature of my job I have to ensure that the websites I develop are browser safe. Does anyone know why 1 video would be working in Chrome but the other won't?
AT TOP OF PAGE
<video id="video" poster="img/poster.png" loop muted class="video-js vjs-default-skin" preload="none" width="100%" height="100%" data-setup="{}">
<source src='img/video.mp4' type="video/mp4"/>
</video>
HALF WAY DOWN PAGE
<video id="s-video" poster="img/poster.png" loop muted class="bg_video video-js vjs-default-skin" preload="none" width="100%" height="100%" data-setup="{}">
<source src="img/video.mp4" type="video/mp4" />
</video>
I also have this bit of DOM Javascript at the bottom of my page
<script>
document.getElementById('video').play();
document.getElementById('s-video').play();
</script>
I would guess (as there is not so much info here) there is a problem with the data being ready soon enough when play() is executed.
You could try to change the following things:
I the tags themselves, change preload to use auto
In the JavaScript, add listeners to the elements for the canplay event
Example:
<video id="video" poster="img/poster.png" loop muted class="video-js vjs-default-skin" preload="auto" width="100%" height="100%" data-setup="{}">
<source src='img/video.mp4' type="video/mp4"/>
</video>
<video id="s-video" poster="img/poster.png" loop muted class="bg_video video-js vjs-default-skin" preload="auto" width="100%" height="100%" data-setup="{}">
<source src="img/video.mp4" type="video/mp4" />
</video>
and
<script>
var video1 = document.getElementById('video');
var video2 = document.getElementById('s-video');
video1.addEventListener("canplay", start);
video2.addEventListener("canplay", start);
function start() {this.play()}; // "this" = current element calling
</script>
Update
This could also work if you want to have preload set to none:
<script>
var video1 = document.getElementById('video');
var video2 = document.getElementById('s-video');
video1.addEventListener("canplay", start);
video2.addEventListener("canplay", start);
function start() {this.play()}; // "this" = current element calling
video1.load(); // start loading video (metadata + data)
video2.load();
</script>

html5 video m3u8: How to auto play the video?

<video id="videoHTML5" class="video" width="100%" height="400" poster="img/poster.png" autoplay controls>
<source src="http://IP/live/stage.stream/playlist.m3u8" >
</video>
<script>
var vdo = document.getElementById('videoHTML5');
vdo.src = 'http://IP/live/stage.stream/playlist.m3u8';
vdo.load();
vdo.play();
</script>
NEVER starts ! I need to press the PLAY button on ipad and adroid !
Any idea on how to autostart an m3u8 video ?
reagards
you can try autoplay="true" in your code

How to stop html5 video from playing when out of viewport?

I'm facing this problem with skrollr: everything goes fine, then when adding a video, it continues playing if out of viewport, even if the div has a display:none declaration. I tried searching here and Google but couldn't find anything and at this point I'm really lost.
For reference, this is the code I'm using:
<div id="seventh" class="view" data-0="display:none;top:0%;" data-27000="display:block;opacity:0;" data-29000="opacity:1;" data-32000="opacity:0;" >
<video id="video" class="video-js vjs-default-skin" controls preload="none" width="1223" height="611" poster="img/poster.jpg" data-setup="{}">
<source src="videos/vid.webm" type='video/webm' />
<source src="videos/vid.mp4" type='video/mp4' />
</video>
</div>
any help on how to achieve this really appreciated
Use
skrollr.init({
render: function(data) {
//get current element opacity and position then play or pause the video
}
});
See http://jsfiddle.net/ybP6b/ for a working example