How to make a video minimized automatically when it ends - javascript

I use a button that calls the function "play()" that make the video play on fullscreen
<div style="text-align:center">
<form>
<input type="button" name="something" value="start_experiment" onclick="play(this,vid)">
</form>
</div>
<video id="vid" width="320" height="240" class="rounded-circle" >
<source src="assets/vid/video.mp4" type="video/mp4" >
</video>
<script>
function play(button,vidid) {
button.style.visibility = "hidden";
var myVideo = vidid;
if (myVideo.requestFullscreen) {
myVideo.requestFullscreen();
}
else if (myVideo.msRequestFullscreen) {
myVideo.msRequestFullscreen();
}
else if (myVideo.mozRequestFullScreen) {
myVideo.mozRequestFullScreen();
}
else if (myVideo.webkitRequestFullScreen) {
myVideo.webkitRequestFullScreen();
}
myVideo.play();
}
</script>
How could I make the video auto-minimized when it stops playing?

.onended() this function use in end video.
The ended event occurs when the audio/video has reached the end.
This event is useful for messages like "thanks for listening", "thanks for watching", etc.
example:-
var vid = document.getElementById("vid");
vid.onended = function() {
alert("The video has ended");
this.exitFullscreen();
/*any this you add this function*/
};

You can add an event listener to your video which fires when it ends.
myvideo.addEventListener('ended', () => {
document.exitFullscreen();
});

Related

How to create a toggle sound button on video

I recently just asked a question on how to execute a working togglePlay button and I left out the sound part bc I thought it could be done the exact same way. I'm now realizing that it's a bit more complicated than I thought.
So far I've been able to get the sound icon to change, but I can't figure out how to get the actual audio to mute and unmute. Here's my code:
const video = document.querySelector('.dvid');
const togglePause = document.querySelector('.toggle-pause');
const toggleSound = document.querySelector('.toggle-sound');
function togglePlay() {
const isPlaying = video.paused ? 'play' : 'pause';
video[isPlaying]();
}
function togglePlyBtn() {
if (this.paused) {
togglePause.innerHTML = '<img src="play.png">';
} else {
togglePause.innerHTML = '<img src="pause.png">';
}
}
function toggleSnd () {
}
function toggleSndBtn() {
if (this.muted === true) {
toggleSound.innerHTML = '<img src="mute.png">' ;
} else {
toggleSound.innerHTML = '<img src="sound.png">';
}
}
video.addEventListener('click', toggleSnd);
video.addEventListener('click', togglePlay);
video.addEventListener('pause', togglePlyBtn);
video.addEventListener('play', togglePlyBtn);
video.addEventListener('muted', toggleSndBtn);
toggleSound.addEventListener('click', toggleSndBtn);
togglePause.addEventListener('click', togglePlay);
<video class="dvid" autoplay loop muted>
<source src="2amfreestyle.mp4" type="video/mp4"/>
<p>This browser does not support this video</p>
</video>
<footer class="indexfooter">
<div class="video-controls">
<button class="toggle-pause"> <img src="pause.png"> </button>
<button class="toggle-sound">
<img src="mute.png">
</button>
You can use volume property to set or return current volume of the video.
So the toggleSnd would look something like this:
function toggleSnd () {
video.volume = video.volume > 0 ? 0 : 1;
}

Radio stream listen in HTML5 Audio element doesn't work on iPhone

I have a radio stream working fine in browsers and Android phones, but when I try to listen on an iPhone it seems not to work. What am I doing wrong?
This is my code:
Html:
<audio id='player' controls="controls" style="display: none">
<source src="http://167.114.116.151:8010/;listen.mp3" type="audio/mpeg">
</audio>
JavaScript:
$(document).ready(function(){
var getaudio = $('#player')[0];
$("#volume").val(getaudio.volume*100);
$('#stop').hide();
$('#mute').hide();
$('#play').click(function(){
//getaudio.play();
document.getElementById("player").play();
$('#play').hide();
$('#stop').show();
});
$('#stop').click(function(){
getaudio.pause();
$('#play').show();
$('#stop').hide();
});
$('.audio').click(function(){
if (getaudio.muted) {
getaudio.muted= false;
$('#mute').hide();
$('#audio').show();
}else{
getaudio.muted= true;
$('#mute').show();
$('#audio').hide();
}
});
$("#volume").bind("change", function() {
getaudio.volume = $(this).val()/100;
});
});

Change onclick() function multiple times (play/pause image change)

<audio>
<source src="data/music/track1.mp3" type="audio/mpeg">
Your user agent does not support the HTML5 Audio element.
</audio>
<button type="button" class="button_media button-mini" onclick="aud_play_pause()">
<img id="play_pause" src="data/play_button.png" onclick "changePlayPauseButton()">
</button>
<audio>
<source src="data/music/track2.mp3" type="audio/mpeg">
Your user agent does not support the HTML5 Audio element.
</audio>
<button type="button" class="button_media button-mini" onclick="aud_play_pause()">
<img id="play_pause_two" src="data/play_button.png" onclick "changePlayPauseButtonTwo()">
</button>
<audio>
<source src="data/music/track3.mp3" type="audio/mpeg">
Your user agent does not support the HTML5 Audio element.
</audio>
<button type="button" class="button_media button-mini" onclick="aud_play_pause()">
<img id="play_pause_three" src="data/play_button.png" onclick "changePlayPauseButtonThree()">
</button>
<script>
var play_pause = "pause_button.png";
function changePlayPauseButton() {
if (play_pause == "pause_button.png") {
document.images["play_pause"].src = "data/pause_button.png";
document.images["play_pause"].alt = "pause";
play_pause = "play_button.png";
} else {
document.images["play_pause"].src = "data/play_button.png";
document.images["play_pause"].alt = "play";
play_pause = "pause_button.png";
}
}
var play_pause_two = "pause_button.png";
function changePlayPauseButtonTwo() {
if (play_pause_two == "pause_button.png") {
document.images["play_pause_two"].src = "data/pause_button.png";
document.images["play_pause_two"].alt = "pause";
play_pause_two = "play_button.png";
} else {
document.images["play_pause_two"].src = "data/play_button.png";
document.images["play_pause_two"].alt = "play";
play_pause_two = "pause_button.png";
}
}
var play_pause_three = "pause_button.png";
function changePlayPauseButtonThree() {
if (play_pause_three == "pause_button.png") {
document.images["play_pause_three"].src = "data/pause_button.png";
document.images["play_pause_three"].alt = "pause";
play_pause_three = "play_button.png";
} else {
document.images["play_pause_three"].src = "data/play_button.png";
document.images["play_pause_three"].alt = "play";
play_pause_three = "pause_button.png";
}
}
</script>
I created a kind of playlist which appears only the button
play / pause . I also customized the button , so that the image automatically change when clicked . The problem is that I have several buttons !
What I like to do, is to change not only the image of the button itself when clicked but also the other button when it is in play mode ( pause image ) to be returned to the play mode (play image )
Go easy on me guys
I just started to code one month ago!
thanks
Well, I'm not sure if is that what you need but take a look the example:
http://jsfiddle.net/j6nbcpL9/
js:
$(document).ready(function(){
$('button').on('click', function(){
var option = $(this).attr('data-btn');
console.log(option);
if(option === 'changePlayPauseButtonThree'){
changePlayPauseButtonThree();
...
}
if(option === 'changePlayPauseButtonTwo'){
changePlayPauseButtonTwo();
...
}
if(option === 'changePlayPauseButton'){
changePlayPauseButton();
...
}
});
});
Also, let me know if is not what you need to implement it properly. The code is not the best but I hope it's help.

HTML Video - Actions OnEnd not Working

I am having trouble getting the onended function to work with my HTML video. It doesnt have to be onended but basically I want a series of things to happen when the video has ended.
Code is as follows:
<script language="JavaScript" type="text/javascript">
window.onload = playVideo;
function playVideo()
{
var video = document.getElementById("video");
var message = document.getElementById("videoinfo");
var button = document.getElementById("playpause");
button.onclick = function()
{
if (video.paused)
{
video.play();
button.innerHTML = "Pause";
message.value = "The video is playing, click the Pause button to pause the video.";
}
else
{
video.pause();
button.inerHTML = "Play";
message.value = "The video is paused, click the Play button to play the video.";
}
video.onended = function(e)
{
button.innerHTML = "Play";
message.value = "The video has ended, click Play to restart the video."
}
}
}
</script>
<button type="button" id="playpause" onclick="playVideo()">Play</button>
<br>
<video id="video" width="320" height="240">
<source src="Video/movie.mp4" type="video/mp4">
<source src="Video/movie.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
<br />
<textarea id="videoinfo" cols="90">
Click the Play button to start the video.
</textarea>
Thanks for the help
EDIT: I cannot post my own answer for 8 hours with 10 or less reputation, so I have to edit:
After 2 days of trying to get this to work, I post a question on here so I can figure it out. Less than 10 mins later I manage to get it to work.
I used an onEnded function in the <video> tag and linked that to a javascript function called videoEnded().
See below:
<script language="JavaScript" type="text/javascript">
function playVideo()
{
var video = document.getElementById("video");
var message = document.getElementById("videoinfo");
var button = document.getElementById("playpause");
button.onclick = function()
{
if (video.paused)
{
video.play();
button.innerHTML = "Pause";
message.value = "The video is playing, click the Pause button to pause the video.";
}
else
{
video.pause();
button.inerHTML = "Play";
message.value = "The video is paused, click the Play button to play the video.";
}
}
}
function videoEnded()
{
var message = document.getElementById("videoinfo");
var button = document.getElementById("playpause");
button.innerHTML = "Play";
message.value = "The video has ended, click Play to restart the video.";
}
</script>
Hope this can help someone else out. I have searched for days looking for an answer and nothing would work.
Thanks
if(Video.ended)
// Code when video ends.
EDIT: sorry for don't give any other explanation, but, have you tried by using .addEventListener method instead? and in which Browser do you develop / debug?

Triggering Events from html5 video player with JQuery

I want to show() a div when my html5 video player reaches a certain time.
I was able to get a div to show at the end of the video, but I'm not sure how to show the div when the video is at a specific time, like 0:06.
<div id = "showdiv" style="display:none" align="center">
this is the message that will pop up.
</div>
<video id='myVideo' align="center" margin-top="100px" class='video-js
vjs-default-skin' preload='auto' data-setup='{}' width='800' height='446'>
<source src='myVideo.mp4' type='video/mp4'l></source>
<script>
document.getElementById('myVideo').addEventListener('ended',myHandler,false);
function myHandler(e) {
if(!e) { e = window.event; }
$("#showdiv").toggle("slow");
}
</script>
Take a look at timeupdate event.
https://developer.mozilla.org/en-US/docs/Mozilla_event_reference/timeupdate
var runAtTime = function(handler, time) {
var wrapped = function() {
if(this.currentTime >= time) {
$(this).off('timeupdate', wrapped);
return handler.apply(this, arguments);
}
}
return wrapped;
};
$('#myVideo').on('timeupdate', runAtTime(myHandler, 3));
http://jsfiddle.net/tarabyte/XTEWW/1/

Categories