I have two files one is video file with no volume and the other one is audio. So I'm running these two files in <audio> and <video> tags. I want that when both file are ready to play then the video play otherwise wait until both are not able to play. So, what I used for this.
canPlay is not working well for me because it can check only one of them at a time.
Thanks
UPDATE
audio.addEventListener('canplay',function(){
audio.play();
video.play();
});
video.addEventListener('canplay',function(){
audio.play();
video.play();
});
I try this but this is not working because whenever one of them is running it play both without care about other one, Because there is play() for both of them.
Listen for canplaythrough event of both the elements and if both can, trigger .play() on both the elements.
The canplaythrough event is fired when the user agent can play the media, and estimates that enough data has been loaded to play the media up to its end without having to stop for further buffering of content.
Try this:
var audioCan = false,
videoCan = false;
audio.addEventListener('canplaythrough', function() {
audioCan = true;
playAll();
});
video.addEventListener('canplaythrough', function() {
videoCan = true;
playAll();
});
function playAll() {
if (audioCan && videoCan) {
audio.play();
video.play();
}
}
Edit: You can achieve the same using promise.
Try this:
var audioLoaded = new Promise(function(resolve) {
audio.addEventListener('canplaythrough', function() {
resolve();
});
});
var videoLoaded = new Promise(function(resolve, reject) {
video.addEventListener('canplaythrough', function() {
resolve();
});
});
function playAll() {
audio.play();
video.play();
}
Promise.all([audioLoaded, videoLoaded]).then(playAll);
Related
I'm watching a series of videos on a website organised in a playlist. Each video is about 2 minutes long.
The website uses HTML 5 video player and it supports auto-play. That is each time a video ends, the next video is loaded and automatically played, which is great.
However, with Fullscreen, even if I fullscreened a video previously, when the next video loads in the playlist, the screen goes back to normal, and I have to click the fullscreen button again....
I've tried writing a simple javascript extension with Tampermonkey to load the video fullscreen automatically.
$(document).ready(function() {
function makefull() {
var vid = $('video')[0]
if (vid.requestFullscreen) {
vid.requestFullscreen();
} else if (vid.mozRequestFullScreen) {
vid.mozRequestFullScreen();
} else if (vid.webkitRequestFullscreen) {
vid.webkitRequestFullscreen();
}
//var vid = $('button.vjs-fullscreen-control').click();
}
makefull()
But I'm getting this error:
Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture.
It's extremely annoying to have to manually click fullscreen after each 2 min video. Is there a way I can achieve this in my own browser? I'm using Chrome.
If you can get the list of URL's then you can create your own playlist. The code cannot be accurately tested within a cross-origin <iframe>, for example at plnkr.co. The code can be tested at console at this very document. To test the code, you can use the variable urls at MediaFragmentRecorder and substitute "pause" event for "ended" event at .addEventListener().
If you have no control over the HTML or JavaScript used at the site not sure how to provide any code that will be able to solve the inquiry.
const video = document.createElement("video");
video.controls = true;
video.autoplay = true;
const urls = [
{
src: "/path/to/video/"
}, {
src: "/path/to/video/"
}
];
(async() => {
try {
video.requestFullscreen = video.requestFullscreen
|| video.mozRequestFullscreen
|| video.webkitRequestFullscreen;
let fullScreen = await video.requestFullscreen().catch(e => {throw e});
console.log(fullScreen);
} catch (e) {
console.error(e.message)
}
for (const {src} of urls) {
await new Promise(resolve => {
video.addEventListener("canplay", e => {
video.load();
video.play();
}, {
once: true
});
video.addEventListener("ended", resolve, {
once: true
});
video.src = src;
});
}
})();
I've written a small jquery code to override HTML 5 play function. However, I am not able to check if a video is playing or not.
Here is my jquery code
$("video").click(function() {
var video = $("#myvideo").get(0);
video.play();
$(".play").css("display", "none");
return false;
});
$("#myvideo").bind("pause ended", function() {
$(".play").css("display", "block");
});
Just give me simple tips to show a div with class="pause"(I have CSS for it) when the video is paused and pause the video as well.
You'd use the paused property to check if the video is paused.
If it's not paused, it's playing
$("video").click(function() {
var video = $("#myvideo").get(0);
if ( video.paused ) {
video.play();
$(".play").hide();
$(".pause").show();
} else {
video.pause();
$(".play").show();
$(".pause").hide();
}
return false;
});
As Jquery is the framework of Javascript
you can use the following code (involves Video JS Frame work):
var my_video_id = videojs('video_id');
if (my_video_id.player_.paused()) {
my_video_id.player_.play();
} else {
my_video_id.player_.pause();
}
I want to play only one audio at a time in response to some mouse event. The situation is onmouse over event on different HTML element plays audio. It becomes noisy when a user moves the mouse fast from one element to another and both the element plays audio. I want to check whether any audio is being played before playing a new audio. I used following code:
var $audioAnno=0;
function audioAnnotation(y){
var audio;
if ($audioAnno==0){
$audioAnno=1;
audio = new Audio(y);
audio.play();
$audioAnno=0;
}
}
It does not stop the 2nd audio to play.
this is how, I would do it, maintain a flag canPlay and on mouse event, if true, then play
canPlay = true;
var es = document.getElementsByTagName('audio'), audios=[];
for(var i=0;i<es.length;i++) audios.push(es[i]);
audios.forEach(function(e){
e.addEventListener('play', function(){
canPlay= false;
});
e.addEventListener('ended', function(){
canPlay= true;
});
});
// later on some mouseEvent based on some condition
function onMouseEvent(audioElement){
if(canPlay){
audioElement.play();
}
};
Edit: fiddle demo.
Edit2:
same thing with just audio object:
var audio = new Audio(), canPlay = true;
audio.src = 'http://upload.wikimedia.org/wikipedia/en/f/f9/Beatles_eleanor_rigby.ogg';
audio.addEventListener('play', function(){
console.log('playing');
canPlay = false;
});
audio.addEventListener('ended', function(){
console.log('stopped');
canPlay = true;
});
audio.play();
//similar mouse event listener changes to
function onMouseEvent(){
if(canPlay){
//audio.src ='...'; // providing new source
audio.play();
}
};
Thanks all.
I could solve the problem. I used following code:
var $audioAnno=0;
function audioAnnotation(x, y){
var audio = new Audio(y);
if ($audioAnno==0){
$audioAnno = 1;
audio.play();
audio.addEventListener("ended", function(){ $audioAnno = 0; });
}
}
A previous question I asked has got me half way to where I need to be, I now have 1 function that fires off 2 functions. A 'loader' function (a spinner graphic) and playAudio which play a file.
function loadPlay(src, trackName) {
loader();
playAudio(src, trackName);
}
When a play button is clicked the load spinner is supposed to appear and when the audio plays the spinner should go away.
Play button:
<span class="play" onclick="loadPlay('http://a797.phobos.apple.com/us/r30/Music/72/89/b9/mzi.aytblawp.aac.p.m4a','t3')" id="t3">
But what is happening is after the play button is clicked there is a slight pause (as audio loads) and the audio and spinner appear at the same time? The loader should appear as the track loads and then go away when the audio plays?
How do I add a pause to make sure the loader appears BEFORE the audio plays?
Both Functions:
function loader() {
// make a loader spinner appear as track loads
$(".loading").addClass("loadingnow");
}
function playAudio(src,trackname) {
// for Android
if (audioPlaying === false) {
if (device.platform == 'Android') {
src = '/android_asset/www/' + src;
}
media = new Media(src, success, error_error);
media.play();
//add playing class so play button is replaced with stop button
document.getElementById(trackname).parentNode.className="playing";
// now track is playing remove the loader spinner
$(".loading").removeClass("loadingnow");
audioPlaying = true;
} else {
//audio is already playing
}
}
function success() {
// track has finished playing so remove the stop button put play button back
$(".playing").removeClass("playing");
audioPlaying = false;
}
function error_error(e) {
//alert('great error');
//alert(e.message);
}
function stopAudio() {
// stop playing track
if (media) {
media.stop();
audioPlaying = false;
}
}
You can use setTimeout to force jQuery to wait a amount of milliseconds
function loadPlay(src, trackName) {
loader();
setTimeout(function(){
playAudio(src, trackName);
}, 1000);
}
This will force the playAudio to wait for 1 second. Your loader will pop up, but your user will have to wait for an additional second because of this.
I want the user to have the option to skip the preroll ad after a specified time (say 5 secs into the ad). Then the normal video would play. How can I achieve this? Currently I have something inline of this:
var adManager = function () {
var adSrc = url,
src = "http://media.w3.org/2010/05/sintel/trailer.mp4";
var adEnded = function () {
videoPlayer.removeEventListener("ended", adEnded, false);
videoPlayer.removeEventListener("playing", adPlaying, false);
$("#companionad").hide();
videoPlayer.src = src;
videoPlayer.load();
videoPlayer.play();
console.log(videoPlayer.currentTime);
};
var adPlaying = function () {
var companionad = $(responseXML).find("HTMLResource").text();
$("#companionad").html(companionad);
console.log(videoPlayer.currentTime);
}
return {
init: function () {
videoPlayer.src = adSrc;
videoPlayer.load();
videoPlayer.addEventListener("ended", adEnded, false);
videoPlayer.addEventListener("playing", adPlaying, false);
if (videoPlayer.currentTime > 5) {
$("#skip").show();
}
console.log(videoPlayer.currentTime);
}
};
}();
adManager.init();
What I am trying to do is:
if (videoPlayer.currentTime > 5) {
$("#skip").show();
}
show the skip button and continue to normal video. Is there any event that is continually fired as the video play progresses?
Do your check against the media.currentTime property in a handler for the timeupdate event. See documentation:
The timeupdate event is fired when the time indicated by the
currentTime attribute has been updated.
Just as an aside, this HTML5 video demo page is a really handy reference for playing around with the various properties and events available to you.