is there a way to create a playlist with video.js? at the moment i'm using a webm video as background, and the thing i want to achive is to add another video playing after the first ended. the best result would be to make them playing in a infinite loop.
this is the video tag i have now:
<video id="video" class="video-js vjs-default-skin"
autoplay preload muted width="1080" height="568"
<source src="wp-content/themes/myTheme/video/video1.webm" type='video/webm'/>
</video>
an this is the video i want to play after the first one:
<video id="video" class="video-js vjs-default-skin"
autoplay preload muted width="1080" height="568"
<source src="wp-content/themes/myTheme/video/video2.webm" type='video/webm'/>
</video>
You can do something similar to this. This will listen to the end event of the first video, and change the src and play the second video.
// Check whether the video has ended, and if so change the src to the next one.
$('video').on('ended', function() {
$('video source').attr('src', "wp-content/themes/myTheme/video/video2.webm");
$("video")[0].load();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<video id="video" class="video-js vjs-default-skin" autoplay preload muted width="600" height="300"> <source src="wp-content/themes/myTheme/video/video1.webm" type='video/webm' />
</video>
I know this has been asked a long time ago, I hope this helps someone
all you need to do is the following
videojs('my-video').on('ended', function() {
var player = videojs('my-video'); //could replace with "this" but just so it is clear to everyone
player.pause();
var new_url = "newideourl"
player.src(new_url);
player.load();
player.play();
});
Related
I need to play a video (webm) and an audio (m4a) file at the same time on a browser that only accepts one media playing at a time (if I try to play them simultaneously on separate <video> and <audio> elements, the previous gets paused automatically).
Does anyone know what can I do?
Control the play of two media using JavaScript.
Try this:
function Players() {
var audio_player = document.getElementById('audio');
var video_player = document.getElementById('video');
audio_player.play();
video_player.play();
}
<button onClick="Players()">PLAY</button>
<br>
<br>
<audio id="audio" controls="controls">
<source src="audio.wav" type="audio/wav">
</audio>
<br>
<video id="video" width="320" height="240" controls="controls">
<source src="movie.mp4" type="video/mp4">
</video>
I'm trying to make video player with an autoplay but sound is not working.
Currently I'm using this but it doesn't work as expected:
var myaudio = document.getElementById("audioID");
function play() {
return myaudio.play();
}
function stop() {
return myaudio.pause();
}
<video width="260" height="180" controls muted id="audioID" autoplay volume="10">
<source src="{{ asset('video/laberspecicebymujb.mp4') }}" type="video/mp4">
<source src="{{ asset('video/laberspecicebymujb.ogg') }}" type="video/ogg">
Your browser does not support the video tag.
</video>
Google has new policies regarding autoplay.
you CAN'T enable both autoplay and sound on chrome browsers
Regarding volume, you need to set the volume on the onloadstart event like below:
<video onloadstart="this.volume=0.2" ...>
I want to download or save a part of a video that is playing in my HTML and I don't want to access webcam and microphone I just need to download or play a part of a video tag in another video tag or download it ... How can I do that?... anything I saw Was accessing the microphone and webcam
<video id="yourVideoplayer" width="640" height="480" preload="auto"> //preload="auto" buffers the video if initialize. you cannot seek a video which isn t buffering already
<source src="test.mp4" type="video/mp4" />
<source src="test.ogv" type="video/ogg" />
This browser is not compatible with HTML 5
</video>
I want a button to start recording from the video playing then I want to save it
<!DOCTYPE html>
<html>
<body>
<video id="original-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>
<video width="320" height="240" data-from="original-video" data-start="5" data-end="10" data-autoreplay="true" autoplay>
</video>
<video width="320" height="240" data-from="original-video" data-start="5" data-end="10" data-autoreplay="false" autoplay>
</video>
<script>
const body = document.querySelector('body');
const videos = document.querySelectorAll('video[data-from]');
videos.forEach(video=>{
const originalVideo = document.getElementById(video.dataset.from);
[...originalVideo.children].forEach(child=>{
video.appendChild(child.cloneNode())
});
video.duration = Number(video.dataset.end) - Number(video.dataset.start);
video.currentTime = video.dataset.start;
video.addEventListener('timeupdate', (e)=>{
if(video.currentTime>=video.dataset.end){
video.pause();
video.currentTime=video.dataset.start;
if(video.dataset.autoreplay==="true"){
video.play();
}
}
});
});
</script>
</body>
This is the closest I could get to your requirements. You use the data attributes to specify:
the original video
the start
the end
if it should replay non-stop
Basically what I'm trying to do is make the video redirect to a different web page after it's finished playing (very similar to what YouTube uses for Playlists). I've tried doing a bit of research before asking this type of question but nothing seems to be working out for me.
Here's the code:
<video id="example_video_1" class="video-js vjs-default-skin"
controls preload="auto" width="854" height="480"
poster="images/thumbnailbackgrounds/AE-DageSide.jpg"
data-setup='{"example_option":true}'>
<source src="files/Clip1.mp4" type='video/mp4' />
</video>
Since it looks like you're using Video.JS for this, you should have a look at their docs:
https://github.com/videojs/video.js/blob/master/docs/index.md
Specifically, the API section:
https://github.com/videojs/video.js/blob/master/docs/api.md
In the "Events" section, it says:
ended
Fired when the end of the media resource is reached. currentTime == duration
So you'd need to get a reference to your player (also on that page):
var myPlayer = videojs("example_video_1");
and then listen for the ended event, and redirect from there:
function endedFunction(){
window.location = 'http://www.example.com/';
}
myPlayer.on("eventName", endedFunction);
As borrowed from this answer, try the following. And you don't need video.js for this.
HTML
<video id="example_video_1" class="video-js vjs-default-skin"
controls preload="auto" width="854" height="480"
poster="images/thumbnailbackgrounds/AE-DageSide.jpg"
data-setup='{"example_option":true}'>
<source src="files/Clip1.mp4" type='video/mp4' />
</video>
JavaScript
<script>
var video = document.getElementsByClassName("video-js");
// Or select element by HTML tag
// var video = document.getElementsByTagName('video')[0];
video.onended = function() {
window.location.href = "www.yoururl.com";
}
</script>
Ought to work.
I followed the quick-start guide for videojs and placed the following code inside the body of my html document:
<video id="video" class="video-js vjs-default-skin" controls width="941"
height="531" autoplay preload="auto" data-setup="{}">
<source type="video/mp4" src="dummy_url">
</video>
All works fine. Autoplay and controls in place.
As I needed to remove the video when the video ends I placed the following code right after the video tag:
<script type="text/javascript">
_V_("video").addEvent("ended", videoEnd);
function videoEnd(){
$('#divId').slideToggle("slow");
setTimeout("$('#divId').remove()", 700);
}
</script>
The problem is that everytime I try to detect some video the autoplay doesn't work anymore. Even the following doesn't trigger autoplay:
<script type="text/javascript">
_V_("video").ready(function(){
var myPlayer = this;
// EXAMPLE: Start playing the video.
myPlayer.play();
});
_V_("video").addEvent("ended", videoEnd);
function videoEnd(){
$('#divId').slideToggle("slow");
setTimeout("$('#divId').remove()", 700);
}
</script>
Any idea on how I can keep the autoplay and listen to the ended event?
Well, I'm not sure if this is the most correct implementation but:
<video id="video" class="video-js vjs-default-skin" controls
width="941" height="531" autoplay preload="auto" data-setup="{}">
<source type="video/mp4" src="dummy_url">
</video>
<script type="text/javascript">
interval = setInterval(videoLoaded, 100);
function videoEnd(){
$('#someid').slideToggle("slow");
setTimeout("$('#someid').remove()", 700);
}
function videoLoaded(){
if(!_V_.players.video){
return false;
}
_V_.players.video.play();
_V_.players.video.addEvent("ended", videoEnd);
clearInterval(interval);
}
</script>
From what I have read, the alternative is to load the video through js only.
This is a problem (from what I read) with the way videojs initializes the video objects. More details can be found here.
Hope it helps some bumper :)
actually better is to start videoLoaded function using setTimeout function, because you can not control your player (if you will need it).