jQuery/javascript hide video element - javascript

Is it possible somehow in jQuery to hide specific video or source element?
<video id="one" autoplay width="300px" height="300px">
<source src="media/sample3.mp4" type="video/mp4" />
</video>
<video id="two" autoplay width="300px" height="300px">
<source src="media/sample.mp4" />
</video>
I would like to play sample3, for example, for 1 minute, then pause sample3, hide it, show sample.mp4 and play that video.
Any suggestons?
My code which I tryed:
var video = $('video').get(0).pause();
if ($('video').get(0).paused) {
$('video').get(0).hide();
};
but the $('video').get(0).hide(); throws Uncaught TypeError: Object #<HTMLVideoElement> has no method 'hide'

I would try something like this
$(document).ready(function(){
var one = $('#one');
var two = $('#two');
play_sound(one);
setTimeout(function(){
pause_sound(one);
one.hide();
two.show();
play_sound(two);
setTimeout(function(){
pause_sound(two);
}, 180*1000);
}, 60*1000);
});
function play_sound(var file){
file.play();
}
function pause_sound(var file){
file.pause();
}

Related

Java Script Auto Next Page after video ends

How Do I make the event Click a button instead of inputting a URL... because the URL is never the same but the words Next Episode will always be there..
// Do not name the function "play()"
function playVideo(){
var video = document.getElementById('video');
video.play();
video.addEventListener('ended',function(){
window.location = 'http://www.google.com';
});
}
</script>
<video controls id="video" width="770" height="882" onclick="playVideo()">
<source src="video/Motion.mp4" type="video/mp4" />
</video>
Give your link an id:
<a id="some-id" href="LINK" title="episode name"><span>next episode</span> <i class="icon-chevron-right"></i></a>
Then change your event listener to this:
video.addEventListener('ended',function(){
document.getElementById('some-id').click();
});

Json if else remove or hide class and add class [duplicate]

I'm having trouble adding in jQuery's toggleClass function into the rest of my code. The page has several HTML5 audio tags on it which are controlled via jQuery. I attempted to add the toggle function to my jQuery audio control function, but it's not adding the class and subsequently the audio control doesn't work.. so I suppose it's some weird syntax error.
What do you guys recommend? Below is a jsFiddle and a my (unfortunately) weak attempt :)
http://jsfiddle.net/danielredwood/FTfSq/10/
HTML:
<div id="music_right">
<div class="thumbnail" id="paparazzi">
<a class="playback">
<img class="play" src="http://www.lucisz.com/imgs/play.png" />
</a>
<audio>
<source src="../audio/fernando_garibay_paparazzisnlmix.ogg" type="audio/ogg" />
<source src="../audio/fernando_garibay_paparazzisnlmix.mp3" type="audio/mpeg" />
Your browser does not support HTML5 audio.
</audio>
</div>
<div class="thumbnail" id="danceinthedark">
<a class="playback">
<img class="play" src="http://www.lucisz.com/imgs/play.png" />
</a>
<audio>
<source src="../audio/fernando_garibay_danceinthedark.ogg" type="audio/ogg" />
<source src="../audio/fernando_garibay_danceinthedark.mp3" type="audio/mpeg" />
Your browser does not support HTML5 audio.
</audio>
</div>
<div class="thumbnail" id="bornthisway">
<a class="playback">
<img class="play" src="http://www.lucisz.com/imgs/play.png" />
</a>
<audio>
<source src="../audio/fernando_garibay_bornthisway.ogg" type="audio/ogg" />
<source src="../audio/fernando_garibay_bornthisway.mp3" type="audio/mpeg" />
Your browser does not support HTML5 audio.
</audio>
</div>
</div>
JavaScript:
var curPlaying;
$(function() {
$(".playback").click(function(e){
e.preventDefault();
var song = $(this).next('audio')[0];
song.toggleClass("playing");
if(song.paused){
song.play();
if(curPlaying) $("audio", "#"+curPlaying)[0].pause();
} else {
song.pause();
}
curPlaying = $(this).parent()[0].id;
});
});
//the function below works, but doesn't have the add/remove class functions
var curPlaying;
$(function() {
$(".playback").click(function(e) {
e.preventDefault();
var song = $(this).next('audio')[0];
if (song.paused) {
song.play();
if (curPlaying) $("audio", "#" + curPlaying)[0].pause();
} else {
song.pause();
}
curPlaying = $(this).parent()[0].id;
});
});
$('thumbnail').toggleClass('pausing playing');
ToggleClass: Add or remove one or more classes from each element in the set of matched elements, depending on either the class's presence or the value of the switch argument.
I would use .addClass() and .removeClass(), as it'll clean up your code quite a bit and allow you to use CSS to perform all that layout work:
$('thumbnail').toggle(function(){
$('.play', this).removeClass('pausing');
$('.play', this).addClass('playing');
}, function(){
$('.play', this).addClass('pausing');
$('.play', this).removeClass('playing');
});

Javascript 'x is not a function'

I'm trying to start and stop two videos with two separate buttons. I've simply copied the code and renamed the variables, yet one piece of code works and one doesn't. I get the error 'TypeError: video2.pause is not a function at HTMLButtonElement.c'. Both videos and buttons are placed in modals respectively. Why am I getting this weird error, especially when exactly the same code works?
Javascript:
var video = document.getElementById("video.mp4");
var playButton = document.getElementById("play-pause");
var video2 = document.getElementById("video2.mp4");
var play = document.getElementById("play-pause2");
playButton.addEventListener("click", function a () {
if (video.paused == true) {
video.play();
playButton.innerHTML = "Pause";
} else {
video.pause();
playButton.innerHTML = "Play";
}
});
play.addEventListener("click", function c () {
if (video2.paused == true) {
video2.play();
play.innerHTML = "Pause";
} else {
video2.pause();
play.innerHTML = "Play";
}
});
HTML:
<video width="900px" height="600px" id="Digital_Poster.mp4" />
<source src="assets/video.mp4" type="video/mp4" id="video.mp4"/>
Sorry, this browser does not support the 'video' tag.
</video>
<div id="video-controls">
<button type="button" id="play-pause">Play</button>
</div>
<video width="900px" height="600px">
<source src="assets/video2.mp4" type="video/mp4" id="video2.mp4"/>
Sorry, this browser does not support the 'video' tag.
</video>
<div id="video-controls">
<button type="button" id="play-pause2">Play</button>
</div>
You should call .pause on the <video> elements, but the id is set on the <source> ones. Moving it to the <video> tags should make it work:
<video width="900px" height="600px" id="video.mp4">
<source src="assets/video.mp4" type="video/mp4" />
Sorry, this browser does not support the 'video' tag.
</video>
<div id="video-controls">
<button type="button" id="play-pause">Play</button>
</div>
<video width="900px" height="600px" id="video2.mp4">
<source src="assets/video2.mp4" type="video/mp4" />
Sorry, this browser does not support the 'video' tag.
</video>
<div id="video-controls">
<button type="button" id="play-pause2">Play</button>
</div>
By the way, I've corrected the /> to > in the first line. Also, declaring two elements with ID set to video-controls is illegal, consider using HTML classes (thanks #zer00ne for pointing out).

jQuery video overlay button

I have made attempts to create an overlay play button for my HTML 5 video. I have created an example on Jfiddle - click here-This works fine. I have tried to integrate my fiddle onto my site however i am receiving the error message Cannot read property 'paused' of undefined. Believe this has something to do with the structure of my code. Below is a snippet of how my code is set up.
$('.video').click(function () {
if($(this).children(".video").get(0).paused){
$(this).children(".video").get(0).play();
$(this).children(".playpause").fadeOut();
}else{
$(this).children(".video").get(0).pause();
$(this).children(".playpause").fadeIn();
}
});
HTML
<div class="col-md-12 video">
<video muted loop controls poster="/assets/casestudies/marketingandcomms/ukcoffeeweek/coffee-video-poster.gif">
<source src="/assets/videos/coffee-video.mp4" type="video/mp4">
</video>
<div class="playpause"></div>
Can anyone point me in the right direction ?
you use two different html structures with wrong JQuery Selectors.
try the Following html and Jquery Codes:
DEMO: https://jsfiddle.net/9ewogtwL/150/
<div class="wrapper">
<video class="video">
<source src="http://e14aaeb709f7cde1ae68-a1d0a134a31b545b257b15f8a8ba5726.r70.cf3.rackcdn.com/projects/31432/1427815464209-bf74131a7528d0ea5ce8c0710f530bb5/1280x720.mp4" type="video/mp4" />
</video>
<div class="playpause"></div>
</div>
with this JQuery Code:
$('.wrapper').click(function () {
var videoEl = $(this).find("video").get(0);
if( videoEl.paused ){
videoEl.play();
$(this).find(".playpause").fadeOut();
}else{
videoEl.pause();
$(this).find(".playpause").fadeIn();
}
});
DEMO URL: JSBIN-DEMO
JQUERY
$('.video').on('click',function () {
$player=$(this).find("video")[0];
if($player.paused){
$player.play();
$(this).find('.playpause').fadeOut();
}
else{
$player.pause();
$(this).find('.playpause').fadeIn();
}
});
HTML
<div class="col-md-12 video">
<video muted loop controls poster="">
<source src="http://www.w3schools.com/tags/movie.mp4" type="video/mp4">
</video>
<div class="playpause">PLAY</div>
<div>

How to stop HTML5 video?

I have a video in popup. When use below code on popup close, the video doesn't stop buffering and have the old video reference when reopen it. Here is the code:
HTML:
<div id="w_oPopup">
<div id="w_oPlayer">
<video id="w_oVideoFrame" autoplay loop controls tabindex="0" width="946" height="532" poster="">
<source src="video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
</video>
</div>
</div>
JS:
$('.w_cExitPopupButton').bind('click', onPopupBlockerClick);
function onPopupBlockerClick(e) {
$('#w_oPopupBlocker').hide();
//Here my tries...
$('#w_oVideoFrame')[0].pause();
$('#w_oVideoFrame')[0].src = "";
}
Try using the pause() method to stop the audio and set the audio path again and play. There is no stop() method to stop the video.
function stop_audio(){
$('#w_oVideoFrame')[0].pause();
$('#w_oVideoFrame')[0].src = " ";
}
function play_audio(){
$('#w_oVideoFrame')[0].src = "path of audio";
$('#w_oVideoFrame')[0].play();
}
use the currentTime on the selected video element
video.currentTime = 0;

Categories

Resources