My HTML5 Video Control API got a shape. But now the client asks me to show Poster once video played.
Now there is a dark black background.
Please let me know how I have to do that.
<video width="640" height="360" x-webkit-airplay="allow" poster="asserts/poster.png" preload="" tabindex="0" class="video1">
<source data-quality="sd" src="http://media.jilion.com/videos/demo/midnight_sun_sv1_360p.mp4"></source>
<source data-quality="hd" src="http://media.jilion.com/videos/demo/midnight_sun_sv1_720p.mp4"></source>
<source data-quality="sd" src="http://media.jilion.com/videos/demo/midnight_sun_sv1_360p.webm"></source>
<source data-quality="hd" src="http://media.jilion.com/videos/demo/midnight_sun_sv1_720p.webm"></source>
</video>
And the Jquery funciton for play/ pause is:
/* Play/Pause */
var gPlay = function() {
if($hdVideo.attr('paused') == false) {
$hdVideo[0].pause();
$video_main_control.removeClass("hd-video-main-control-none");
$hdVideo[0].poster.show();
}
else {
$hdVideo[0].play();
$video_main_control.addClass("hd-video-main-control-none");
}
};
$video_main_control.click(gPlay);
$hd_play_btn.click(gPlay);
$hdVideo.click(gPlay);
$hdVideo.bind('play', function() {
$hd_play_btn.addClass('hd-paused-button');
});
$hdVideo.bind('pause', function() {
$hd_play_btn.removeClass('hd-paused-button');
});
$hdVideo.bind('ended', function() {
$hd_play_btn.removeClass('hd-paused-button');
});
<video width="640" height="360" x-webkit-airplay="allow" poster="asserts/poster.png" preload="" tabindex="0" class="video1" id="video_elem">
</video>
var showBanner = function () {
// Show your banner
};
document.getElementById("video_elem").addEventListener("ended",showBanner, false );
Video api has "ended" event for this purpose. Ref: https://developer.mozilla.org/en-US/docs/DOM/Media_events
Related
I have a video gallery, each item looks like
<video muted="" allowfullscreen="" autoplay="" controls="" controlslist="nodownload noplaybackrate" disablepictureinpicture="" class="story loop="" poster="" style="max-height: 500px; width: 349px;" id="">
<source src="https://example.com/video.mp4" type="video/mp4">
</video>
They have to look like gifs - on autoplay, and if user switches on the sound on one of the video, the others have to became muted, because now it's possible to switch on the sound on more then one video, and it's too much sound.
I tried already that ways, and they didn't help
1
jQuery('video').on('volumechange', function() {
jQuery('video').attr('muted');
jQuery(this).removeAttr('muted');
})
2
jQuery('video').on('volumechange', function() {
jQuery('video').prop('muted', true);
jQuery(this).prop('muted', false);
})
3 - with the Class
jQuery('video').on('volumechange', function() { jQuery('video').removeClass('sound'); jQuery(this).addClass('sound'); jQuery('video').attr('muted'); jQuery('video.sound').removeAttr('muted');
})
and 4 - the native js after clothing jquery tag
const videoElements = document.getElementsByTagName('video');
for (const currentVideoElement of videoElements) {
currentVideoElement.addEventListener('volumechange', () => {
for (const otherVideoElement of videoElements) {
if (otherVideoElement !== currentVideoElement) {
otherVideoElement.muted = true;
}
}
});
}
What else could help, where I'm wrong?
Would be very good if no extra libraries needed.
The site itseldf
I have a folder with 5 videos. I want to write a program in HTML/AngularJS to dynamically call the videos from the folder without having to mention the videos in a list.
<video id="myvideo" width="320" height="240" controls style="background:black">
<source class="active" src="http://www.w3schools.com/html/mov_bbb.mp4"
type="video/mp4" />
<source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4" />
</video>
var myvid = document.getElementById('myvideo');
myvid.addEventListener('ended', function(e) {
// get the active source and the next video source.
// I set it so if there's no next, it loops to the first one
var activesource = document.querySelector("#myvideo source.active");
var nextsource = document.querySelector("#myvideo source.active +
source") || document.querySelector("#myvideo source:first-child");
// deactivate current source, and activate next one
activesource.className = "";
nextsource.className = "active";
// update the video source and play
myvid.src = nextsource.src;
myvid.play();
});
This code works if I explicitly mention the videos in the list in the program itself. But I don't want to do that.
Any way around this? Thanks in advance.
I feel, you want to achieve this by following way:
const videoSrcList = [
"http://www.w3schools.com/html/mov_bbb.mp4",
"http://www.w3schools.com/html/movie.mp4",
...
];
var nextIndex = 1;
var myvid = document.getElementById('myvideo');
myvid.addEventListener('ended', function(e) {
var activesource = myvid.querySelector("source");
activesource.src = videoSrcList[nextIndex];
myvid.play();
});
<video id="myvideo" width="320" height="240" controls style="background:black">
<source class="active" src="http://www.w3schools.com/html/mov_bbb.mp4"
type="video/mp4" />
<source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4" />
</video>
I have a problem to get out the duration of an mp4 video file when the html document is ready. My code:
(function ($, root, undefined) {
$(function () {
'use strict';
$(document).ready(function() {
var duration = $("section:first-child() video").get(0).duration;
alert(duration);
});
});
});
The script works in firefox but in chrome it returns an NaN. Im not a javascript professional and i use wordpress HTML5 Blank theme.
Thanks for your help and best regards.
You need to preload the video metadata for you to be able to access them. Then, within the loadedmetadata event, you may access the duration as below.
$(function() {
var $video = $('#video_container').find('video');
$video.on("loadedmetadata", function() {
$('#duration').text($video[0].duration);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="video_container">
<video poster="http://media.w3.org/2010/05/sintel/poster.png" preload="metadata" controls="" width="400">
<source type="video/mp4" src="http://media.w3.org/2010/05/sintel/trailer.mp4" id="mp4"></source>
<source type="video/webm" src="http://media.w3.org/2010/05/sintel/trailer.webm" id="webm"></source>
<source type="video/ogg" src="http://media.w3.org/2010/05/sintel/trailer.ogv" id="ogv"></source>
<p>Your user agent does not support the HTML5 Video element.</p>
</video>
</div>
<div>Total duration : <span id="duration"></span></div>
you need a listener to get the duration of a video
var videoTime = 0;
var currentvideo = document.getElementById('video');
currentvideo.addEventListener('play', function() {
videoTime= currentvideo.duration;
console.info(videoTime) // get the duration
});
I saw some examples of defaultPlaybackRate and they say it work on Chrome. So I use their example codes and run on Chrome, it doesn't change the speed to 3.0x when I click the button. Anyone can tell me why?
Here my javascript code,
$(document).ready(function(){
var video = document.getElementById('video');
$("#speed").click(function() { // button function for 3x fast speed
video.defaultPlaybackRate=3.0;
});
});
The HTML codes,
<button id="speed" type="button">3.0x</button>
and
<video id="video" width="930" height="500" controls>
<source src="caption.mp4" type="video/mp4">
<source src="caption.ogg" type="video/ogg" >
<source src="caption.webm" type="video/webm" >
</video>
Because once you change the defaultPlaybackRate you have to load the video again using video.load(); (or set it before the video has loaded). If you want to change the rate while the video plays, use playbackRate instead.
var video = document.getElementById('video');
$("#speed").click(function () { // button function for 3x fast speed
video.defaultPlaybackRate = 3.0;
video.load();
});
or
var video = document.getElementById('video');
$("#speed").click(function () { // button function for 3x fast speed
video.playbackRate = 3.0;
});
jsFiddle example
I have a 5 video's and video player with 5 different buttons.
When I click on any one of the buttons it loads the video, but if I want to watch a different one I have to reload the page and click on one.
How can I fix it so that you can click on any video button at any time and still make the videos work. I think I need to make a mouse down statement, if so how would I go about writing one. Here is my html and JavaScript:
Html
<video id="myVideo" controls autoplay></video>
<div>
Demo Reel
Video1
Video2
Video3
Video4
</div>
JavaScript
var myVid = document.getElementById('myVideo');
var myVidContents1 = "<source src='video/demoreel.mp4' type='video/mp4'/> <source src='video/demoreel.webm' type='video/webm'/> <source src='video/demoreel.ogv' type='video/ogg'/>";
function addVideo1() {
myVid.innerHTML = myVidContents1;
}
var myVidContents2 = "<source src='video/video1.mp4' type='video/mp4'/> <source src='video/video1.webm' type='video/webm'/> <source src='video/video1.ogv' type='video/ogg'/>";
function addVideo2() {
myVid.innerHTML = myVidContents2;
}
var myVidContents3 = "<source src='video/video2.mp4' type='video/mp4'/> <source src='video/video2.webm' type='video/webm'/> <source src='video/video2.ogv' type='video/ogg'/>";
function addVideo3() {
myVid.innerHTML = myVidContents3;
}
var myVidContents4 = "<source src='video/video3.mp4' type='video/mp4'/> <source src='video/video3.webm' type='video/webm'/> <source src='video/video3.ogv' type='video/ogg'/>";
function addVideo4() {
myVid.innerHTML = myVidContents4;
}
var myVidContents5 = "<source src='video/video4.mp4' type='video/mp4'/> <source src='video/video4.webm' type='video/webm'/> <source src='video/video4.ogv' type='video/ogg'/>";
function addVideo5() {
myVid.innerHTML = myVidContents5;
}
Try this:
function addVideo1() {
myVid.innerHTML = myVidContents1;
return false;
//This over-rides the default link behaviour,
// so the browser doesn't scroll to the top of the page instead of firing your code
}
After you create the new source tags, you need to force the video element to load the new sources, like so:
myVid.load();
See:
trying to add a multi source video player with more then one video?
Your click handlers should work just fine, but there may be some strange UX side effects. You're probably better off using a tag other than "a", such as "span" or "button", and then you can set the click handler in javascript:
document.getElementById('link1').addEventListener('click', addVideo1, false);
// etc...
Don't leave off that third "false" argument, otherwise your code will break in older versions of Firefox.