Develop Reference

How to Play GIF on click audio play button

I want that whenever anyone plays the audio then only gif play..
here what I tried...
number = 0;
var animations = ['https://static.wixstatic.com/media/6b2a99_687dc4cb09bc42bdb230d1c8ce7815a4~mv2.gif',
'https://static.wixstatic.com/media/6b2a99_687dc4cb09bc42bdb230d1c8ce7815a4~mv2.gif',
'https://static.wixstatic.com/media/6b2a99_687dc4cb09bc42bdb230d1c8ce7815a4~mv2.gif'
];
function character() {
image = document.getElementById('1BoXzCv8EbZ5BDnb47T31lPM1lKdne7wG');
image.src = animations[number];
}
<div class="board">
<img src="https://blogger.googleusercontent.com/img/a/AVvXsEhUIEQv7m_0HrLkcEDQURyV74eGEO8ZDW0LhhyFbK72BBXm9S0BolRB0V82i7RvX5S83j1QPOYazQlbUp8p9S5xSnlMNIpQGwJdKlmwCiPc8sHMqO8dPgYpstyejRK9rKeWNlofjOhTQGcfyk3Jt_1YqAezHYyRBDJiaGYD1R5O9mrdzaQKzDAc0Pe2oA=s16000" alt="cassete" width="300" height="200" id="1BoXzCv8EbZ5BDnb47T31lPM1lKdne7wG" onclick="character();"/>
<audio class="splplayer" controls="controls" id="audio_player" preload="metadata">
<source src="https://drive.google.com/uc?export=download&id=1BoXzCv8EbZ5BDnb47T31lPM1lKdne7wG"></source></audio></div>
Don't know where the error occurs.... here gif is playing on clicking on it not on clicking the audio play button

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).

How can I add buffering to my HTML video

I have multiple videos on a page.
<div class="row text-center">
<video width="320" height="240" controls class="myvideo">
<source src="http://www.html5videoplayer.net/videos/toystory.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<div class="row text-center">
<video width="320" height="240" controls class="myvideo">
<source src="http://www.html5videoplayer.net/videos/fantasy.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
I want to add buffering events to them. Also, when I click video 1, video 2 (if playing) should automatically stop. How can I achieve this? They have a common class. Shall I have to implement ids with them?

give Ids to your videos:
<video width="320" height="240" controls class="myvideo" id="myVideoOne">
<video width="320" height="240" controls class="myvideo" id="myVideoTwo">
for buffering :
var vid = document.getElementById("myVideoOne");
alert("Start: " + vid.buffered.start(0)
+ " End: " + vid.buffered.end(0));
var vid = document.getElementById("myVideoTwo");
alert("Start: " + vid.buffered.start(0)
+ " End: " + vid.buffered.end(0));
for stoping automatically you can use this inside your videoPlay1 and videoPlay2 functions:
function videoPlay1() {
var video1 = document.getElementById("myVideoOne");
var video2 = document.getElementById("myVideotwo");
if (video1.paused) {
video1.play();
video2.pause();
} else {
video1.pause();
video2.pause();
}
}
function videoPlay2() {
var video1 = document.getElementById("myVideoOne");
var video2 = document.getElementById("myVideotwo");
if (video2.paused) {
video2.play();
video1.pause();
} else {
video1.pause();
video2.pause();
}
}
example : to set a loader for myVideoOne you can use this jquery:
css:
video.loading {
background: black url(/yourGifImg.gif) center center no-repeat;
}
jquery:
$('#myVideoOne').on('loadstart', function (event) {
$(this).addClass('loading')
});
$('#myVideoOne').on('canplay', function (event) {
$(this).removeClass('loading')
});

Changing mediasource whith javascript

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++;
}

jQuery/javascript hide video element

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();
}