HTML Audio to play after clicking on button - javascript

How to play audio when button 1 is clicked, and pause/stop when buttons 2 or 3 are clicked?
Button 1
Button 2
Button 3
<audio controls autoplay loop>
<source src="<?php bloginfo('template_directory'); ?>/audio/audio1.ogg" type="audio/ogg">
<source src="<?php bloginfo('template_directory'); ?>/audio/audio1.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>

$(".button1").click(function() {
$("audio")[0].play();
});
$(".button2").click(function() {
$("audio")[0].pause();
});

$(".button1").click(function(){
$('audio')[0].play();
})
$(".button2").click(function(){
$('audio')[0].pause();
})
http://jsfiddle.net/8GycB/3/

Related

Unable to Mute HTML5 video using jQuery attr

Trying to mute video using attr but it doesn't work.
HTML
<video autoplay muted class='preview-video'>
<source src='file.mp4' type='video/mp4'>
</video>
jQuery
function volumeToggle(button) {
var muted = $(".preview-video").attr("muted");
$(".preview-video").attr("muted", !muted)
}
However, when I try prop() instead of attr() it works. Can someone explain in detail the reason behind it?
You need to toggle the muted property of the video element, not the attribute. Try this:
let $vid = $('.preview-video');
$('button').on('click', function() {
$vid.prop('muted', (i, m) => !m);
});
video {
width: 300px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Toggle Mute</button>
<video autoplay muted class='preview-video'>
<source src="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4" type="video/mp4">
</video>

How to execute a function before someone click play button in audio tag

I want a function to be called just before play button is clicked.
A code which should work something like this :
<audio controls>
<source src="music.mp3"/>
<source src="music.ogg" />
</audio>
<script>
$('playbutton').on('click', function(e){
//some functions
});
</script>
Audio has onplay event.
<audio onplay="myFunction()">
You can watch for play and pause events.
<audio id="audio" controls>
<source src="music.mp3"/>
<source src="music.ogg" />
</audio>
var audio = document.getElementById('audio')
audio.addEventListener('play', () => console.log('play'))
audio.addEventListener('pause', () => console.log('pause'))
Media events

Using event listening wait for readyState html5 video

Here is my javascript on loading of video.
var vid = $("#video");
$("#video").on("load",function() {
if ( vid[0].ReadyState === 4 ) {
console.log("loaded video!");
console.log(vid);
vid.fadeIn();
}
});
I want to play my video everytime the video div refreshes after .load() runs. How do i loop this until readyState == 4? I tried using on("canplaythrough") but this is never recognized as a function...
Make sure you set preload="auto" (and don't use autoplay) in the tag, then you can use the canplay event:
var vid = $("#video");
vid.on("canplay", function() {
vid[0].play();
vid.fadeIn(1000);
});
$("#change").on("click", function() {
vid.hide();
vid[0].src = "http://www.html5rocks.com/en/tutorials/video/basics/devstories.mp4";
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<video id="video" width="500" height="280" preload="auto" style="display:none">
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4">
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm">
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg">
</video>
<button id="change">Change source (mp4 only for this example)</button>

How to start a HTML 5 video from a particular position?

<video width="320" height="240" controls>
<source src="Video.mp4#t=03,20" type="video/mp4">
Your browser does not support the video tag.
</video>
The videos starts from 3 minutes 20 seconds in my code. I want to play video from beginning after setting #t=03,20 in html5. How can I do this?
<video id="vid1" width="320" height="240" controls loop>
<source src="Video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
You have to wait until the browser knows the duration of the video before you can seek to a particular time.
<script>
window.onload=function(){
document.getElementById('vid1').addEventListener('loadedmetadata', function() {
this.currentTime = 200;
}, false );
};
</script>
OR
function restart1()
{ var video1 = document.getElementById("vid1");
video1.currentTime = 0;
}
<video id="vid1" width="320" height="240" onclick="restart1();" controls>
<source src="Videos.mp4#t=03,61" type="video/mp4">
Your browser does not support the video tag.
</video>

How to pause video on video.js without controls

I'm using video.js. Here's how I have implemented it.
<video id="example_video_1" class="video-js vjs-default-skin" loop preload="auto" width="530" height="530" poster="<?php echo $iurl; ?>" autoplay>
<source src="<?php echo $vurl; ?>" type='video/mp4' />
</video>
As you have noticed, the controls are disabled. But I would like to pause this video when it's clicked. Can someone tell me how I can do that.
According to the documentation here (https://github.com/videojs/video.js/blob/master/docs/api.md), the following javascript should work:
HTML
<video id="example_video_1" onclick="togglePause()" class="video-js vjs-default-skin" loop preload="auto" width="530" height="530" poster="<?php echo $iurl; ?>" autoplay>
<source src="<?php echo $vurl; ?>" type='video/mp4' />
</video>
Javascript
var myPlayer = videojs("example_video_1");
togglePause = function(){
if (myPlayer.paused()) {
myPlayer.play();
}
else {
myPlayer.pause();
}
}
After being paused, I assumed the video should resume playing? jsFiddle working example: http://jsfiddle.net/fR2Xs/
Another way of doing it is by enabling the controls and setting their display value to none. This way you can pause the video and controls are not visible.
.vjs-control-bar, .vjs-big-play-button {
display: none !important;
}

Categories