Prevent an HTML5 video from playing when the play button is paused - javascript

I have a video embedded in a site, and when a user plays the video I have JS to expand the video to the width of the site (and then shrink it on pause).
The video is being played/paused using the built-in controls, but when the video plays while expanding, it just looks weird, hence my desire to prevent playing until after the expansion.
However, preventDefault(); doesn't seem to be working in this instance. Does anyone know a way of achieving this? Thanks.
Here is my JS -
$(document).ready(function(){
var video = $('#intro-video');
video.on('play', function(e){
e.preventDefault();
video.animate({
height: '506',
width: '900'
}, 500);
});
video.on('pause', function(e){
video.animate({
height: '200',
width: '356'
}, 500);
});
});
And here is the HTML source -
<video id="intro-video" controls="">
<source type="video/mp4" src="http://www.somesite.com/video.mp4"></source>
Sorry, your browser is old and doesn't support the HTML5 'video' tag. Sucks to be you...
</video>

Because you're using the inbuilt player controls, the video will start when you press play, and I don't believe you can prevent the event at this point in javascript.
I would recommend looking into creating your own controls for the player. That way, you can listen for the click event on the play button, and control the playback for the video directly.
Otherwise, the only thing I can think of is what I've done here: JSFiddle
Basically, when the video starts to play, pause it. Do the animation, then play it once the animation's finished. I've created a variable so the pause animation doesn't get triggered when we manually pause it:
var video = $('#intro-video');
var enlarged = false;
video.on('play', function(e){
if (!enlarged){
video[0].pause();
video.animate({
height: '506',
width: '900'
}, 500, function() {
enlarged = true;
video[0].play();
});
}
});
video.on('pause', function(e){
if (enlarged) {
enlarged = false;
video.animate({
height: '200',
width: '356'
}, 500);
}
});

Actually it's very simple:
let videoShouldNotPlay = true
video.onplay = function () {
if (videoShouldNotPlay) {
video.pause()
video.currentTime = 0 // set to the current time needed
alert("You can't play the video right now")
return
}
}

Related

Keep video controls 3 seconds after hover

So video controls appear only when hovering on this video, and they disappear after three seconds when the cursor is out of the area. This is the desired behaviour, however it happens only when the video is on the beginning… If I hover while the video is playing, they disappear right away. Is there a way around this perhaps? Here's a pen to demonstrate: https://codepen.io/anon/pen/RJpjJQ?editors=1111
$('#video').hover(function () {
if (this.hasAttribute("controls")) {
var that = this;
setTimeout(function() {
that.removeAttribute("controls")
}, 3000)
} else {
this.setAttribute("controls", "controls")
}
});
Here is a working pen but unfortunately this only works for webkit browsers.
The trick is the
::-webkit-media-controls-panel
I'm not sure if there is a way to do it on mozilla for example.

Extending video frame to full-screen from jPlayer using onClick function

functionality:
User is able to access the video page from the main menu. Video will be played automatically, at this moment, the video is not in full screen and for aesthetic purposes, there are no control buttons in the video frame.
Secondly, when user clicks on the video, it will be displayed as full-screen, and when user clicks on the full-screen video, the video will exit the full screen and reverts back to the original video frame size.
What has been done:
I have created the video frame by using the jQuery .jPlayer. And the video is playing automatically when the video page is loaded.
I have attached the following code:
function Footprints() {
console.log("Footprints");
//Main video player for video page
$("#Footprints_1").jPlayer({
ready: function() {},
swfPath: "javascript",
supplied: "webmv, ogv, m4v",
loop: true,
size: {
width: 1450,
height: 750
}
}).bind($.jPlayer.event.play, function() { // pause other instances of player when current one play
$(this).jPlayer("pauseOthers");
});
$("#Footprints_1").jPlayer("setMedia", {
//set m4v tag to array Footprints VideoList
m4v: "http://www.jplayer.org/video/m4v/Finding_Nemo_Teaser.m4v"
}).jPlayer("play");
$("#Footprints_1").show();
$("Footprints_1").click(function() {
console.log("fullscreen")
$("#Footprints_1").requestFullscreen();
})
}
<div id="Footprints_Page" align="center" style="position:absolute; background-repeat: no-repeat; display: none; top:0px; left:0px; ">
<!--Video Player-->
<div id="Footprints_1" style="position:absolute; top: 180px;"></div>
</div>
Hence, when you run the code, it is showing this:
Issue:
At this point, when I click on the video frame when the video is playing, nothing happens. The video doesn't expand to the full screen.
Hence, how am I able to make the video expand to full screen when I click on the video and and when the video is clicked it reverts back to the original size.
Thanks.
You are currently fighting two three issues.
The first is you are not using jplayer's event system. that is why the clicks are being ignored.
I added a bind.click to your jplayer decleration, and the clicks responded.
.bind($.jPlayer.event.click, function() {
console.log("fullscreen")
$("#Footprints_1").requestFullscreen();
});
See this Fiddle.
The second issue is that you are calling requestFullscreen() on a jQuery object. It is not part of the jQuery API. You need to be calling it on an HTML element.
document.getElementById("jp_video_0").requestFullscreen();
So, the above example should probably be: (untested)
.bind($.jPlayer.event.click, function() {
console.log("fullscreen")
document.getElementById("jp_video_0").requestFullscreen();
});
If you want to have some control over padding and placement, request fullscreen on the container, and you can use CSS.
document.getElementById("Footprints_1").requestFullscreen();
However, the third issue is that not all browsers seem to use the same method of requestFullscreen(). See Mozilla docs. For me the following worked in Chrome:
.bind($.jPlayer.event.click, function() {
console.log("fullscreen")
var elem = document.getElementById("Footprints_1");
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen();
}
})
This Post has more info on fullscreen from jQuery as well as info on x-browser issues.
Hope it helps.
Edit: jsFiddle can't demonstrate the Fullscreen API, because I can not add the required 'AllowFullscreen' attribute to their iframe. If you view the frame source of the jsFiddle result, you can just save that as an HTML document, and it should work.

Nedd to play an audio clip and a image animation by clicking one button in HTML5 template

I've a play button in my HTML5 template. When I click the 'play' button then move an image left to right.
Now I want to play an audio clip by click on the same button. That means I want to say- when I'll click the play button then the image will move and the audio clip will play at the same time.
the play button's class is ".move_image"
You can write function like
$('.move_image').on('click',function(){
document.getElementById('audio').play();//To Play The Audio
$('#image1').animate({
opacity: 0.25,
left: "+=50",
height: "toggle"
}, 2000, function() {
//Bring Back to original Stage
$('#image1').animate({
opacity: 1,
left: "-=50",
height: "toggle"
}, 2000);
});
});
You can refer to JSFiddle. For Image Animation you can use .slide or .animate() jQuery functions.
You could try something like this:
function moveImage() {
// Code to move image
play();
}
function play() {
var audio = $('#audio');
audio.play();
}
<input type="button" value="PLAY" class=".move_image" onclick="moveImage()">
<audio id="audio" src="URL to audio file here" ></audio>
When introducing audio on Canvas I have used this library: http://www.createjs.com/#!/SoundJS
SoundJS is part of the CreateJS library, works well for Flash like tweens, preloading images and sound and playing sounds.

injecting and playing html5 video without flickering

I'm preloading a video in the background and at a certain point I would like to inject it into the dom and immediately play it without this annoying flickr / repaint / reflow thats going on for a split second. Is there anything I can do to fix this. I'm providing a test case showing an image and video doing the same thing to demonstrate the difference. The image displays smooth and the video displays rather harsh. (Oh, i've testing this on safari and chrome and issue is pretty similar)
http://jsfiddle.net/1d0tcae3/1/
// preloading video
var $video = $('<video />').attr({
'width': '400',
'height': '233',
}).append($('<source />').attr({
'src': "http://dev.davidsalazar.com/videos/pugpie.com/test.mp4",
'type': "video/mp4"
})).css('visibility', 'hidden');
// preloading image
var $image = $('<img />').attr({
'src': 'http://pugpie.davidsalazar.com/assets/uploads/img/22b5f827b29eebf03edded92f5c8b11b.gif',
'width': '404',
'height': '416'
}).css('visibility', 'hidden');
$('#showplay-video').on('click', function(e) {
e.preventDefault();
$video.on('play', function() {
// is there any other event or hackery i could possibly use to make this video play without the browser repainting / reflowing so harshly when playing the video
$video.css('visibility', 'visible')
});
$('#video').html($video);
$video[0].play();
});
$('#showplay-image').on('click', function(e) {
e.preventDefault();
$('#image').html($image);
$image.css('visibility', 'visible');
});
Use the canplay event instead of play to display the video - see MDN.
This fires when enough of the video has buffered for it to be played, so you do not get the black screen showing while it is buffering up - http://jsfiddle.net/1d0tcae3/2/
$video.on('canplay', function() {
$video.css('visibility', 'visible')
});

fade HTML5 video image / poster in and out

Is it possible to fade out the HTML5 video poster / oimage if we start the video and fade it in again when we pause or stop the video?
Normally the poster image is directly hidden when the video is started and also directly shown when we load the video / stop it
Maybe we can clone the poster image to a canvas, position it over the video and fade it out and in?
Is there an existing solution / script?
The behavior of the poster attribute is really driven by the <video> tag itself. You're just telling it, before starting display this image. Like any video element customization, this would require you to have your own elements involved. Basically, you would have:
<div class="video-container" style="position:relative">
<video width="x" height="y"></video>
<img style="position: absolute; top: 0; left: 0; bottom: 0; right: 0">
</div>
You would then have to bind your events, for example with Zepto:
$('.video-container img').bind('click', function() {
var $img = $(this),
$vid = $img.parent().find('video');
$img.animate({opacity: 0}, 1000, 'linear', function() {
$img.css({visibility: 'hidden'});
$vid[0].play();
});
});
Similarly, you would listen for the pause event and when it occurs fade back in.
That said, this is probably a bad idea for two reasons:
This probably won't work for iOS or any device that prevents scripted playback. In these devices, you can only trigger play() when inside a click event handler. Since you're playing a second later, you don't really have control.
You're breaking default functionality. When I pause a video, I may want to seek to another moment but I definitely want to know where I left off. The lack of a visual queue takes that away.
Update
Here's a different approach that would help you get around the iOS difficulties. In this case, you actually start the video on click, meaning there will be a period of time where the fading image covers the playing video, so it's your call.
$('.video-container').each(function() {
var $img = $(this).find('img'),
$vid = $(this).find('vid');
$img.bind('click', function() { $vid[0].play() });
$vid.bind('play', function() {
$img.animate({opacity: 0}, 1000, 'linear', function() {
if($vid[0].playing) {
$img.css({visibility: 'hidden'});
}
});
});
$vid.bind('pause ended', function() {
$img.css({visibility: 'visible'});
$img.animate({opacity: 1}, 1000, 'linear');
});
});

Categories