I am having an issue where I have multiple video player instances of Videojs, and aside from the first player instance, every player instance afterwards(e.g source-player-2); The playback rate and caption button do not work.
PHP code to generate player instances
//Create Player instance with Playback Speed
if($options['videojs_prate'] == 'on') {
$videojs = <<<_end_
<video id="{$id}" class="video-js vjs-default-skin vjs-big-play-centered"
width="{$width}" height="{$height}" preload="auto" poster="{$poster}"{$autoplay_attribute} {$controls_attribute} {$loop_attribute}
{$muted_attribute} playsInline data-setup='{"playbackRates": [0.5, 1, 1.25, 1.5, 2, 4],"techOrder": ["chromecast", "html5"]}'>
</video>
<script>
var player = videojs('#{$id}');
</script>
HTML code for the generated Player Instances
<div class='pframe'></div></div><div id='source-player-1' class='source-box'><div class='pframe'> <div class='player_responsive'>
<video id="player_1125498774" class="video-js vjs-default-skin vjs-big-play-centered" width="640" height="264" preload="auto" poster=""
controls playsInline data-setup='{"playbackRates": [0.5, 1, 1.25, 1.5, 2, 4],"techOrder": ["chromecast", "html5", "flash"]}'>
<source src="src_link" label="720p" type="video/mp4" />
<track kind="captions" src="cap_link" label="”English”"></video>
<script>
var player = videojs('#player_1125498774');
</script>
<div id='source-player-2' class='source-box'><div class='pframe'> <div class='player_responsive'>
<video id="player_1454625181" class="video-js vjs-default-skin vjs-big-play-centered" width="640" height="264" preload="auto" poster="" controls playsInline data-setup='{"playbackRates": [0.5, 1, 1.25, 1.5, 2, 4],"techOrder": ["chromecast", "html5", "flash"]}'>
<track kind="captions" src="cap_link" label="”English”">
<source src="src_link" label="4K" type="video/webm" />
</video>
<script>
var player = videojs('#player_1454625181');
</script>
I thought it was an issue with the player #id being the same, but as you can see above, each player instance has their unique ID.
Any insight of this issue would be appreciated.
Related
How to make videos play automatically from many videos using dynamic dom arrays?
At the moment I am still using the html video element manually instead of the javascript array.
var video1 = document.getElementById('video1');
var video2 = document.getElementById('video2');
var video3 = document.getElementById('video3');
var imagen1 = document.getElementById('imagen1');
function imgTransition(){
imagen1.style.opacity=0;
video1.play();
video1.style.opacity=1;
}
video1.onended = function(){
video2.play();
video1.style.opacity=0;
video2.style.opacity=1;
}
video2.onended = function(){
video3.play();
video2.style.opacity=0;
video3.style.opacity=1;
}
video3.onended = function(){
video3.style.opacity=0;
imagen1.style.opacity=1;
window.setTimeout(imgTransition, 5000);
}
*{padding:0;margin:0}video{width:100%;height:100%;position:absolute;object-fit:cover;transition:all 1.2s linear;z-index:-10}.video1{opacity:1}.video2{opacity:0}.video3{opacity:0}.imagenes{opacity:0;transition:opacity 2s;width:100%;height:100%;position:absolute;object-fit:cover;z-index:-10}.container{width:100%;height:100%}
<div class="container">
<video autoplay id="video1" class="video1">
<source src="http://thenewcode.com/assets/videos/ocean-small.mp4" type="video/mp4">
</video>
<video id="video2" class="video2">
<source src="https://hunzaboy.github.io/Ckin-Video-Player/ckin.mp4" type="video/mp4">
</video>
<video id="video3" class="video3">
<source src="https://www.cssscript.com/demo/vanilla-js-custom-html5-video-player-pureplayer/360.mp4" type="video/mp4">
</video>
<img src="transition.gif" class="imagenes" id="imagen1">
</div>
How to make videos play automatically from many videos using dynamic dom arrays?
How to dynamic the function:
video.onended = function(){..} ?
I have three videos that I am trying to detect when they end, and then navigate to another page.
The function seems to only work for the first video $vid1 and nothing happens to the $vid2 and $vid3 videos.
I came across this question, and sourced my code from there.
(I noticed in a comment that it stated that the 'correct' answer doesn't work in chrome)
How would I go about making this work for all videos?
JS
//variables
var $vid1 = document.getElementById("vid1");
var $vid2 = document.getElementById("vid2");
var $vid3 = document.getElementById("vid3");
//functions
function Redirect1() {
window.location.replace('ExamplePage1');
}
function Redirect2() {
window.location.replace('ExamplePage2');
}
function Redirect3() {
window.location.replace('ExamplePage3');
}
//events
$vid1.addEventListener("ended", Redirect1, false);
$vid2.addEventListener("ended", Redirect2, false);
$vid3.addEventListener("ended", Redirect3, false);
HTML
<div class="videoResult vidOne">
<video id="vid1" controls>
<source src="#" type="video/mp4">
</video>
</div>
<div class="videoResult vidTwo">
<video id="vid2" controls>
<source src="#" type="video/mp4">
</video>
</div>
<div class="videoResult vidThree">
<video id="vid3" controls>
<source src="#" type="video/mp4">
</video>
</div>
May be, try this?
//functions
function Redirect1() {
window.location.replace('./ExamplePage1');
}
function Redirect2() {
window.location.replace('./ExamplePage2');
}
function Redirect2() {
window.location.replace('./ExamplePage3');
}
Here is my javascript on loading of video.
var vid = $("#video");
$("#video").on("load",function() {
if ( vid[0].ReadyState === 4 ) {
console.log("loaded video!");
console.log(vid);
vid.fadeIn();
}
});
I want to play my video everytime the video div refreshes after .load() runs. How do i loop this until readyState == 4? I tried using on("canplaythrough") but this is never recognized as a function...
Make sure you set preload="auto" (and don't use autoplay) in the tag, then you can use the canplay event:
var vid = $("#video");
vid.on("canplay", function() {
vid[0].play();
vid.fadeIn(1000);
});
$("#change").on("click", function() {
vid.hide();
vid[0].src = "http://www.html5rocks.com/en/tutorials/video/basics/devstories.mp4";
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<video id="video" width="500" height="280" preload="auto" style="display:none">
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4">
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm">
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg">
</video>
<button id="change">Change source (mp4 only for this example)</button>
<video width="320" height="240" controls>
<source src="Video.mp4#t=03,20" type="video/mp4">
Your browser does not support the video tag.
</video>
The videos starts from 3 minutes 20 seconds in my code. I want to play video from beginning after setting #t=03,20 in html5. How can I do this?
<video id="vid1" width="320" height="240" controls loop>
<source src="Video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
You have to wait until the browser knows the duration of the video before you can seek to a particular time.
<script>
window.onload=function(){
document.getElementById('vid1').addEventListener('loadedmetadata', function() {
this.currentTime = 200;
}, false );
};
</script>
OR
function restart1()
{ var video1 = document.getElementById("vid1");
video1.currentTime = 0;
}
<video id="vid1" width="320" height="240" onclick="restart1();" controls>
<source src="Videos.mp4#t=03,61" type="video/mp4">
Your browser does not support the video tag.
</video>
I'm using video.js. Here's how I have implemented it.
<video id="example_video_1" class="video-js vjs-default-skin" loop preload="auto" width="530" height="530" poster="<?php echo $iurl; ?>" autoplay>
<source src="<?php echo $vurl; ?>" type='video/mp4' />
</video>
As you have noticed, the controls are disabled. But I would like to pause this video when it's clicked. Can someone tell me how I can do that.
According to the documentation here (https://github.com/videojs/video.js/blob/master/docs/api.md), the following javascript should work:
HTML
<video id="example_video_1" onclick="togglePause()" class="video-js vjs-default-skin" loop preload="auto" width="530" height="530" poster="<?php echo $iurl; ?>" autoplay>
<source src="<?php echo $vurl; ?>" type='video/mp4' />
</video>
Javascript
var myPlayer = videojs("example_video_1");
togglePause = function(){
if (myPlayer.paused()) {
myPlayer.play();
}
else {
myPlayer.pause();
}
}
After being paused, I assumed the video should resume playing? jsFiddle working example: http://jsfiddle.net/fR2Xs/
Another way of doing it is by enabling the controls and setting their display value to none. This way you can pause the video and controls are not visible.
.vjs-control-bar, .vjs-big-play-button {
display: none !important;
}