Firefox does not mute the video when the video element is cloned with jQuery.
JS:
$( document ).ready(function() {
var origin = $('.item-video');
var target = $('.clone');
origin.clone(true).appendTo(target);
origin.empty();fix
});
HTML:
<div class="item-video">
<video width="560" height="315" autoplay muted controls loop>
<source src="big-buck-bunny_trailer.webm" type="video/webm">
<!-- <source src="http://video.webmfiles.org/big-buck-bunny_trailer.webm" type="video/webm"> -->
</video>
</div>
<div class="clone">
</div><div class="item-video">
<video width="560" height="315" autoplay muted controls loop>
<source src="big-buck-bunny_trailer.webm" type="video/webm">
<!-- <source src="http://video.webmfiles.org/big-buck-bunny_trailer.webm" type="video/webm"> -->
</video>
</div>
<div class="clone">
</div>
jsfiddle
Any ideas how I can fix the bug on Firefox?
I don't know why this is happening on FF but this is the workaround
origin.clone(true).appendTo(target).find('video').attr('onloadedmetadata','this.muted =true');
Related
I'm in charge of maintaining the website of a small foundation dedicated to video art.
On the homepage we used to have a few videos playing randomly when the user clicked on play.
But suddenly a while back it stopped working , the videos won't load on Chrome /Edge /Vivaldi while on Firefox it plays only the last video in the list ...
<div class="videosaccueil">
<section id="videos">
<video playsinline="" controls="controls" preload="none"><source type="video/mp4" src="/wp-content/uploads/2018/videos/video1.mp4"></video>
<video playsinline="" controls="controls" preload="none"><source type="video/mp4" src="/wp-content/uploads/2018/videos/video2.mp4"></video>
<video playsinline="" controls="controls" preload="none"><source type="video/mp4" src="/wp-content/uploads/2018/videos/video3.mp4"></video>
<video playsinline="" controls="controls" preload="none"><source type="video/mp4" src="/wp-content/uploads/2018/videos/video4.mp4"></video>
<video playsinline="" controls="controls" preload="none"><source type="video/mp4" src="/wp-content/uploads/2018/videos/video5.mp4"></video>
<video playsinline="" controls="controls" preload="none"><source type="video/mp4" src="/wp-content/uploads/2018/videos/video6.mp4"></video>
<video playsinline="" controls="controls" preload="none"><source type="video/mp4" src="/wp-content/uploads/2018/videos/video7.mp4"></video>
<video playsinline="" controls="controls" preload="none"><source type="video/mp4" src="/wp-content/uploads/2018/videos/video8.mp4"></video>
<video playsinline="" controls="controls" preload="none"><source type="video/mp4" src="/wp-content/uploads/2018/videos/video9.mp4"></video>
<video playsinline="" controls="controls" preload="none"><source type="video/mp4" src="/wp-content/uploads/2018/videos/video10.mp4"></video>
</section> <script><br />
(function () {<br />
"use strict";<br />
var videosSection = document.getElementById("videos");<br />
var videosSectionClone = videosSection.cloneNode();<br />
var videos = videosSection.getElementsByTagName("video");<br />
var randomVideo = videos.item(Math.floor(Math.random() * videos.length)).cloneNode(true);<br />
randomVideo.setAttribute("preload", "auto");<br />
videosSectionClone.appendChild(randomVideo);<br />
videosSection.parentNode.replaceChild(videosSectionClone, videosSection);<br />
randomVideo.play();<br />
})();<br />
</script>
</div>
I wasn't the one that made the random play code and I'm not practical enough to understand what went wrong so It would be really nice if someone can indicate to me how to fix the code if it's possible .
Thank you very much for your help .
I'm modifying a bit of code I found here from this question.
I am trying to get it working now for multiple instances of a video. This is the only way I can get it working but I would like to make it work for each instance that there is a video which changes on each page this applies on.
$( function() {
const bgv = $('.bgvid');
$('source', bgv).each(function() {
const el = $(this);
el.attr('src', el.data('src'));
});
bgv[0].load();
bgv[1].load();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<video class="bgvid" playsinline="playsinline" loop="loop" autoplay="autoplay" muted="muted" preload="none">
<source type="video/mp4" data-src="https://archive.org/download/UNIVAC-AD-2/UNIVAC2_512kb.mp4">
</video>
<video class="bgvid" playsinline="playsinline" loop="loop" autoplay="autoplay" muted="muted" preload="none">
<source type="video/mp4" data-src="https://archive.org/download/UNIVAC-AD-2/UNIVAC2_512kb.mp4">
</video>
I have tried putting it within a loop like this instead of the bgv[0].load(); but it didn't work:
$('.bgvid').each(function(){
$(this).load();
});
Just call this.load(), don't convert the DOM element into a jQuery element.
$( function() {
const bgv = $('.bgvid');
$('source', bgv).each(function() {
const el = $(this);
el.attr('src', el.data('src'));
});
bgv.each(function() {
this.load();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<video class="bgvid" playsinline="playsinline" loop="loop" autoplay="autoplay" muted="muted" preload="none">
<source type="video/mp4" data-src="https://archive.org/download/UNIVAC-AD-2/UNIVAC2_512kb.mp4">
</video>
<video class="bgvid" playsinline="playsinline" loop="loop" autoplay="autoplay" muted="muted" preload="none">
<source type="video/mp4" data-src="https://archive.org/download/UNIVAC-AD-2/UNIVAC2_512kb.mp4">
</video>
I have list of videos and I want videos to play only when I click the thumbnail.
<video style="min-width: 100%; min-height: 100%; " id="vid" width="auto" height="auto" controls autoplay="true" loop="loop" preload="auto" muted="muted">
<source src="video/sample.mp4" type="video/mp4">
<source src="video/sample.ogg" type="video/ogg">
</video>
<div id="divVideo">
<video id="MyVideo" style="min-width: 100%; min-height: 100%; " id="vid" width="auto" height="auto" controls autoplay="true" loop="loop" preload="auto" muted="muted">
<source src="video/sample.mp4" type="video/mp4">
</video>
</div>
Then write a javascript function to load different videos
function changeVideo(source){
var $video=$("#MyVideo")[0];
$("#MyVideo source").attr('src', source);
$video.load();
$video.play();
}
suppose you have 3 thumbnails as
<img class="thumbnail" data-url="source1" src="img1"/>
<img class="thumbnail" data-url="source2" src="img2"/>
<img class="thumbnail" data-url="source3" src="img3"/>
in document ready,
write function
$(".thumbnail").click(function(){
changeVideo($(this).attr("data-url"));
});
FOr showing in a modal pop up just make use of bootstrap modal pop up
https://www.w3schools.com/bootstrap/bootstrap_modal.asp
in that to load video into the pop up use
$(".modal-body").html($("#divVideo").html());
after this write the command to show pop up
$("#MyModal").show()
I want to create a buffer gif when user seeks, play or pause the video. I am able to succeed a bit but I can'f figure out how to do this on seek. This is my code.
HTML:
<div class="row text-center">
<video width="320" height="240" controls id="video1" onplay="buffer(this.id)" poster="" class="">
<source src="http://distribution.bbb3d.renderfarming.net/video/mp4/bbb_sunflower_1080p_30fps_normal.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<br/>
<div class="row text-center">
<video width="320" height="240" controls id="video2" onplay="buffer(this.id)" poster="" class="">
<source src="http://www.html5videoplayer.net/videos/toystory.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
CSS:
video.loading {
background: black url("img/loader_old.gif") center center no-repeat;
z-index: 300000 !important;
}
JQUERY:
function buffer(id){
$('#'+id).on('loadstart', function (event) {
$(this).addClass('loading');
});
$('#'+id).on('canplay', function (event) {
$(this).removeClass('loading');
$(this).attr('poster', '');
});
}
You can set the value of poster attribute to .gif at html, remove value at canplay event, where you call $(this).attr('poster', '');
<div class="row text-center">
<video width="320" height="240" controls id="video1" poster="img/loader_old.gif" class="">
<source src="http://distribution.bbb3d.renderfarming.net/video/mp4/bbb_sunflower_1080p_30fps_normal.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<br/>
<div class="row text-center">
<video width="320" height="240" controls id="video2" poster="img/loader_old.gif" class="">
<source src="http://www.html5videoplayer.net/videos/toystory.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
$(function() {
$("video").each(function() {
$(this).on("canplay", function (event) {
$(this).attr("poster", "");
})
})
});
I am developing an html5 player supports ads with video-js
Since i know it doesn't work in iOS, is it the same on Android?
So far i've tried these with no luck on autoplay in Android
HTML
<video id="inReadPlayer" autoplay loop="loop"
controls preload="auto" class="video-js vjs-default-skin" width="640"
height="360" > <source src="'+videoSource+'" type="video/mp4">
</video>
JS
var player = videojs('inReadPlayer', { /* Options */ }, function() {
this.play();
this.on('ended', function() {
});
});
Thanks in advance
Try this:
var videoplayer = document.getElementById('inReadPlayer')
videoplayer.addEventListener("load", function() {
videoplayer.play();
});
videoplayer.onended = function() {
source.setAttribute('src', 'MAINVIDEO.mp4');
};
<video id="inReadPlayer" autoplay loop="loop"
controls preload="auto" class="video-js vjs-default-skin" width="640"
height="360" > <source src="'+videoSource+'" type="video/mp4">
</video>
Note that this snippet won't work because there is no video source