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).
Related
I'm using the following code to display video and audio files in HTML5 player:
<video id="myvideo" controls muted>
<source src="path/to/video.mp4" type="video/mp4" />
<audio id="myaudio" controls>
<source src="path/to/audio.mp3" type="audio/mpeg"/>
</audio>
</video>
<script>
var myvideo = document.getElementById("myvideo");
var myaudio = document.getElementById("myaudio");
myvideo.onplay = function() {myaudio.play(); myaudio.currentTime = myvideo.currentTime;}
myvideo.onpause = function() {myaudio.pause();}
</script>
The problem is that I can't get control on the volume controls (mute/unmute, volume up/down). It just doesn't work. Unfortunately I don't know the correct event name for it.
Could someone help me with that?
Thanks!
Muted doesn't have a simple event tied to it, what you would need to do is track the volumechange event and check the muted attribute
myvideo.onvolumechange = function() {
if (myvideo.muted) {
myaudio.pause();
}
}
see https://www.w3.org/2010/05/video/mediaevents.html for a fairly extensive list of the events and attributes available for the standard <video> tag
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" ...>
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();
});
I've made a jquery script to pause the background music on click a video but it don't work. Can anyone help me?Here's my javascript:
<script src="../style/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(
function(){
$("#trailer").click(
function(){
$("#bgm").get(0).pause();
}
)
}
);
</script>
Here's my HTML:
<video height="340" width="864.5" id="trailer" onclick="goFullscreen('trailer');">
<source src="video.mp4" type="video/mp4">
</video>
<embed src="sound.mp3" hidden="true" autostart="true" loop="true" id="bgm"></embed>
Anyway, my embed mp3 can't loop too, can anyone correct it for me?THKS.
probably the embed element does not have the HTMLMediaElement interface which includes the pause() method. you can use the HTMLAudioElement <audio> instead.
than: access the audio element directly from your click event handler.
$("#bgm").pause();
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.