Video which for some reason doesn't play most of the time on Desktop.
<video autoplay loop id="video-background" class="video-bg" poster="assets/images/home-vid.jpg">
<source src="/assets/videos/home.mp4" type="video/mp4">
</video>
Video shoudl autoplay in loop when page is opened..
I tried on FF, Chrome it play once as Private browsing then it stopped playing again..
$(document).ready(function () {
$('#fullpage').fullpage({
verticalCentered: true,
//sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE'],
afterRender: function () {
//playing the video
$('video').get(0).play();
}
});
});
You have to add playsinline autoplay muted loop, Chrome dont allow a video to autostart if it'ss not muted
You can try this:
<video src="{{ asset('/assets/videos/home.mp4' )}}" muted autoplay loop playsinline></video>
And put this js after that:
window.addEventListener('load', async () => {
let video = document.querySelector('video[muted][autoplay]');
try {
await video.play();
} catch (err) {
video.controls = true;
}
});
Related
I have used Owl Carousel which have 3 HTML-5 Video & auto-play mode.
First Item is Video and 4th and 7th are videos.
When i run in IE-11 every third image item comes video which not hide.
Basically, my requirements is when video item comes video should autoplay and not run any next item until video end. if video end then next slide come.
this all working good chrome & Mozilla but IE-11 have video item not proper hide.
var owl = window.jQuery('.slider_owl');
window.jQuery('.slider_owl').owlCarousel({
items: 1,
loop: true,
dots: false,
video: true,
autoplay:true,
autoplayHoverPause:false,
autoplayTimeout:5000,
responsive : {
768 : {
onInitialized: function () {
if ($(".owl-item.active video", this.$element).length) {
$(".owl-item.active video", this.$element)[0].play();
owl.trigger('stop.owl.autoplay');
$(".owl-item.active video", this.$element).on('ended', function () {
owl.trigger('play.owl.autoplay')
});
}
},
onTranslated: function () {
if ($(".owl-item.active video", this.$element).length) {
$(".owl-item.active video", this.$element)[0].play();
owl.trigger('stop.owl.autoplay');
$(".owl-item.active video", this.$element).on('ended', function () {
owl.trigger('play.owl.autoplay')
});
}
}
}
}
});
From your description, since you are using HTML 5 video element, I suggest you could try to add an event listener to detect whether the video is displaying or ended, then stop/start the owlCarousel.
Please refer to this sample to add an event listener to the video element.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="output"></div>
<video id="myVideo" width="320" height="176" controls autoplay>
<source src="http://www.w3schools.com/tags/mov_bbb.mp4" type="video/mp4">
<source src="http://www.w3schools.com/tags/mov_bbb.ogg" type="video/ogg">
</video>
<script>
var media = document.getElementById('myVideo');
// Playing event
media.addEventListener("playing", function() {
$("#output").html("Playing event triggered");
});
// Pause event
media.addEventListener("pause", function() {
$("#output").html("Pause event triggered");
});
//End event
media.addEventListener("ended", function () {
$("#output").html("Ended event triggered");
});
</script>
Then, in the playing and ended function, you could start/stop the owlCarousel using the following command:
owl.trigger('play.owl.autoplay')
or
owl.trigger('stop.owl.autoplay')
More detail information about OwlCarousel Autoplay, you could check this article.
I have a video with autoplay on my website http://vakuutustiedot.fi/arkhaltia/ and it works perfectly on Mozilla but not working in Chrome. The video stopped instantly when the page was loaded and it never played until you refresh the page(at least 2 times).
<div class="homepage-hero-module">
<div class="video-container">
<video id="vid" autoplay loop class="fillWidth">
<source src="video/video1.mp4" type="video/mp4" />
<source src="video/video1.webm" type="video/webm" />
</video>
<div class="poster hidden">
<img src="images/smoke.jpg" alt="">
</div>
<script>
$('#vid')[0].play()
</script>
</div>
</div>
JS:
$( document ).ready(function() {
scaleVideoContainer();
initBannerVideoSize('.video-container .poster img');
initBannerVideoSize('.video-container .filter');
initBannerVideoSize('.video-container video');
$(window).on('resize', function() {
scaleVideoContainer();
scaleBannerVideoSize('.video-container .poster img');
scaleBannerVideoSize('.video-container .filter');
scaleBannerVideoSize('.video-container video');
});
});
function scaleVideoContainer() {
var height = $(window).height() + 5;
var unitHeight = parseInt(height) + 'px';
$('.homepage-hero-module').css('height',unitHeight);
}
function initBannerVideoSize(element){
$(element).each(function(){
$(this).data('height', $(this).height());
$(this).data('width', $(this).width());
});
scaleBannerVideoSize(element);
}
function scaleBannerVideoSize(element){
var windowWidth = $(window).width(),
windowHeight = $(window).height() + 5,
videoWidth,
videoHeight;
// console.log(windowHeight);
$(element).each(function(){
var videoAspectRatio = $(this).data('height')/$(this).data('width');
$(this).width(windowWidth);
if(windowWidth < 1000){
videoHeight = windowHeight;
videoWidth = videoHeight / videoAspectRatio;
$(this).css({'margin-top' : 0, 'margin-left' : -(videoWidth - windowWidth) / 2 + 'px'});
$(this).width(videoWidth).height(videoHeight);
}
$('.homepage-hero-module .video-container video').addClass('fadeIn animated');
});
}
Actually I have noticed that if go through link it works immediately but if you refresh it's not working again. Who knows what's the problem?
It may be that you need to add the 'muted' attribute to allow it autoplay - see this example:
The snippet below plays in chrome, for example, if you want a reference:
<video autoplay muted poster="path to video" id="bgvid">
<source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4">
</video>
I want to autoplay an HTML5 video after opening it on fancybox3.
here's my codepen:
https://codepen.io/ableslayer/pen/aygGQX
and my code:
$(document).ready(function() {
$("[data-fancybox]").fancybox({
afterShow: function() {
// After the show-slide-animation has ended - play the vide in the current slide
this.content.find('video').trigger('play')
// Attach the ended callback to trigger the fancybox.next() once the video has ended.
this.content.find('video').on('ended', function() {
$.fancybox.next();
});
}
});
});
Give your video a id (myVideo) and add this line in afterShow function
var vid = document.getElementById("myVideo");
vid.play();
Javascript
$(document).ready(function() {
$("[data-fancybox]").fancybox({
afterShow: function() {
// After the show-slide-animation has ended - play the vide in the current slide
var vid = document.getElementById("myVideo");
vid.play();
// Attach the ended callback to trigger the fancybox.next() once the video has ended.
this.content.find('video').on('ended', function() {
$.fancybox.next();
});
}
});
});
HTML
<a data-fancybox data-src="#one" class="fancybox">link</a>
<div id="one" style="display:none">
<video id='myVideo' width="400" controls autoplay>
<source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
</div>
I have 2 videos. Each 7 seconds long. I need the top video to fadeout after it is halfway done playing, revealing the bottom video for 3.5 seconds, then fading back in, in an infinite loop.
I am unable to get the video to fade and not sure how to make it start at a specific time. This is what I have:
JS
<script type="text/javascript">
video.addEventListener('ended', function () {
$('#vid').addClass('hide');
$('video').delay(100).fadeOut();
}, false);
video.play();
var vid1=document.getElementById("video-loop");
vid1.addEventListener(function () {
$('video').delay(100);
}, false);
vid1.play();
</script>
HTML
<div id="#video">
<video id="vid" autoplay preload="auto">
<source src="videos/interactive2_3.mp4.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
</video>
<video id="video-loop" preload="auto" loop>
<source src="videos/interactive2-loop.mp4.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
</video>
</div>
to track the time in the video and make decisions based on that, you'll want to track the timeupdate event on the video, and then use the currentTime property to decide what to do.
This fragment will allow you to swap one video out at the 2.5s mark, play the second for 3.5s then swap back to the first ... you can elaborate based on the timer events to make it more flexible for your scenario...
<script>
var showing = 1 // which of the two videos are showing at the moment
var video1 = document.getElementById('vid');
var video2 = document.getElementById('video-loop');
video1.addEventListener('timeupdate',function(e){
if ((showing == 1) && (video1.currentTime > 2.5)) {
showing=2
video1.pause()
$('#vid').delay(100).fadeOut();
$('#video-loop').delay(100).fadeIn();
video2.play()
}
});
video2.addEventListener('timeupdate',function(e){
if ((showing == 2) && (video2.currentTime > 3.5)) {
video2.pause()
$('#video-loop').delay(100).fadeOut();
$('#vid').delay(100).fadeIn();
video1.play()
}
});
</script>
<div>Iteration: <span id="iteration"></span></div>
<video id="video-background" autoplay="" muted="" controls>
<source src="https://res.cloudinary.com/video/upload/ac_none,q_60/bgvid.mp4" type="video/mp4">
</video><div>Iteration: <span id="iteration"></span></div>
var iterations = 1;
var flag = false;
document.getElementById('iteration').innerText = iterations;
var myVideo = document.getElementById('video-background');
myVideo.addEventListener('ended', function () {
alert('end');
if (iterations < 2) {
this.currentTime = 0;
this.play();
iterations ++;
document.getElementById('iteration').innerText = iterations;
} else {
flag = true;
this.play();
}
}, false);
myVideo.addEventListener('timeupdate', function () {
if (flag == true) {
console.log(this.currentTime);
if (this.currentTime > 5.5) {
console.log(this.currentTime);
this.pause();
}
}
}, false);
// Please note that loop attribute should not be there in video element in order for the 'ended' event to work in ie and firefox
I'm working on an sandbox experiment using html5 video and am wondering how I can get the poster image to display after again once the end user hovers off the video?
I have the video setup so that if you hover over the video can auto play and if you hover off it stops. I would like it to return back to poster image.
Javascript
<script>
document.addEventListener('mouseover',hoverVideo,false);
var vid = document.getElementById('vid1');
function hoverVideo(a)
{
if(a.target == vid)
{
vid.play();
this.addEventListener('mouseout',hideVideo,false);
}
}
function hideVideo(e)
{
if(e.target == vid)
{
vid.pause();
}
}
</script>
HTML5
<video id="vid1" width="1000" height="418"
poster="poster.png" loop="true" preload="auto"
controls class="video-js vjs-default-skin">
<source src="my_video.mp4" type='video/mp4' >
<source src="my_video.webm" type='video/webm' />
<source src="my_video.ogv" type='video/ogg' />
</video>
Try this (you'll need to include jQuery)
function hideVideo(e)
{
if(e.target == vid)
{
vid.pause();
var poster = $(vid).attr("poster");
$(vid).attr("poster", "");
$(vid).attr("poster", poster);
}
}