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>
Related
I realise this has been asked before and for that, I apologise but as it stands I can't get a pop up modal to stop playing a video when the close button is pressed.
Any help would obviously be grand.
Thank you!
HTML:
<div class="converseVideo">
<div class=textAnchor>
<h3 class=stickyConverseText>I was lost for language too</h3>
</div>
<video autoplay muted loop class="myVideo converseVideoContainer">
<source src="Media/converse.mp4" type="video/mp4">
</video>
<button onclick="toggleConversePopUp()" class="playButton conversePlayButton">
<img src="Media/playIcon.jpg" title="Play Icon">
</button>
<h2 class=videoTagsLeft>Converse</h2>
</div>
<div class="videoPopUp" id="popup-1">
<video class="conversePopUp" id="myVideo" controls>
<source src="Media/converse.mp4" type="video/mp4">
</video>
<button class="closeButton" onclick="toggleConversePopUp()" >×</button>
</div>
and this is the JS:
let modalOpen = false; // Default to closed
function openModal() {
setModal(true);
}
function closeModal() {
setModal(false);
}
function toggleModal() {
setModal(!modalOpen);
}
function setModal(value) {
modalOpen = value;
document.getElementById("popup-1").classList.toggle("active", value);
}
function pauseMedia() {
document.querySelector('video').pause()
}
function playMedia() {}
function toggleConversePopUp(){
document.getElementById("popup-1").classList.toggle("active");
}
The solution to this was actually quite simple. I think I needed to have JQuery which I hadn't set up and then it was a relatively simple piece of JS which is below.... for anyone that stumbles across this and has a similar issue!
function toggleConversePopUp(){
document.getElementById("popup-1").classList.toggle("active");
if($('.active').length === 0) {
document.getElementById('myVideo').pause();
}
}
Now, I've been using NUXT with my own Django for a bit. I would like to know how in VUE I can add a button to the next video.
<video id="movieads" class="center" width="640" controls>
<source src="https://cdn.videvo.net/videvo_files/video/free/2013-08/small_watermarked/hd0983_preview.webm" type="video/webm">
</video>
<button v-on:click="">Next VDO</button>
And in javascripts i will use document.getElementById('movieads').src = OTHER_URL;
methods: {
Change() {
console.log("Skip Ads");
this.$refs.youtube.src =
"OTHERVDO";
console.log(this.$refs.youtube.src);
}
},
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).
I ran into a little problem right now and i can't find a solution.
HTML:
<video id="vid" controls >
<source src=".mp4" type="video/mp4">
<source src="HEYE.mp4" type="video/mp4">
</video>
JavaScript:
function ChangeVideo(){
if(click%2 == 0){
document.getElementById('vid').src="Troll.mp4";
click++;
}else{
document.getElementById('vid').src="HEYE.mp4";
click++;
}
}
Button:
<button onclick="ChangeVideo()">Change video</button>
the problem is that i dont get it to change video when i click the button.
My to videos in my map is named "HEYE.mp4" and "Troll.mp4"
function ChangeVideo(){
var vid = document.getElementById('vid');
vid.src = click%2 ? "HEYE.mp4" : "Troll.mp4";
vid.load();
vid.play();
click++;
}
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();
}