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;
}
Related
Trying to mute video using attr but it doesn't work.
HTML
<video autoplay muted class='preview-video'>
<source src='file.mp4' type='video/mp4'>
</video>
jQuery
function volumeToggle(button) {
var muted = $(".preview-video").attr("muted");
$(".preview-video").attr("muted", !muted)
}
However, when I try prop() instead of attr() it works. Can someone explain in detail the reason behind it?
You need to toggle the muted property of the video element, not the attribute. Try this:
let $vid = $('.preview-video');
$('button').on('click', function() {
$vid.prop('muted', (i, m) => !m);
});
video {
width: 300px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Toggle Mute</button>
<video autoplay muted class='preview-video'>
<source src="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4" type="video/mp4">
</video>
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>
How to play audio when button 1 is clicked, and pause/stop when buttons 2 or 3 are clicked?
Button 1
Button 2
Button 3
<audio controls autoplay loop>
<source src="<?php bloginfo('template_directory'); ?>/audio/audio1.ogg" type="audio/ogg">
<source src="<?php bloginfo('template_directory'); ?>/audio/audio1.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
$(".button1").click(function() {
$("audio")[0].play();
});
$(".button2").click(function() {
$("audio")[0].pause();
});
$(".button1").click(function(){
$('audio')[0].play();
})
$(".button2").click(function(){
$('audio')[0].pause();
})
http://jsfiddle.net/8GycB/3/
<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>