We Keep Coding

Playing next video by calling a function that needs the event passed to it

The question of how can JavaScript call the next video has been asked as I have thoroughly researched this topic before posting. However, in the situation that I will describe, a video is running after an onclick event calls the function: function(e) and I need to be able to call the next video by calling the function(e) again once the code detects an ended event by using the addEventListener method.
I have posted all my code below. In addition I have added comments to illustrate what I “think” is happening. I am brand new to JavaScript and have recently retired, so I have had time to research the Internet to try and piece together what is taking place. Please feel free to clarify my commented code as I would appreciate being set straight on what I have wriiten.
I have also made an attempt to put the code on jsfiddle
https://jsfiddle.net/dan2004/tuouh36d/
but it only seems to function in Chrome.
My main question to everyone is in regard to the statement:
document.getElementById('videoPlayer').addEventListener('ended',handler,false);
If I call a function outside of the function, I can issue a message via an alert, but if I call the function that I am in (handler(e)) I cannot get the next video to run. Somehow I need to be able to call the handler(e) function and send it the next onclick event.
Thanks for any help.
var video_playlist, links, i, videotarget, filename, video, source;
// Gets the video object from <div id="player"> in the HTML
video_playlist = document.getElementById("player");
// "links" is an array which contains all the <a href> tags in the <div id="playlist">.
// This div is located within <div id="player"> and contains a clickable playlist.
links = video_playlist.getElementsByTagName('a');
// This "for loop" scrolls through the links array of <a href> attributes and
// assigns an "onclick = handler" event to each one.
for (i=0; i<links.length; i++) {
links[i].onclick = handler;
};
// e is an [object MouseEvent]
function handler(e) {
// The handler function receives the full path to the mp4 file when it is clicked on in the playlist.
// The "preventDefault" method stops the function from following that path.
// This is so the data in the path may be parsed and manipulated below
e.preventDefault();
// videotarget grabs the href attribute of the item clicked on
// in the "playlist". This is the full path to the video file.
videotarget = this.getAttribute("href");
// Through the use of substr, filename grabs that part of the href which
// does not include the extension.
filename = videotarget.substr(0, videotarget.lastIndexOf('.')) || videotarget;
// The variable "video" contains the video object. This is obtained by using document.querySelector().
// This document method uses the css id class, #player, and grabs the [object HTML VideoElement].
// The [object HTML VideoElement] resides in <div id="player">
video = document.querySelector("#player video");
//Removes the poster attribute in the video tag
video.removeAttribute("poster");
// The source variable is used to hold an array of all the source tags in the
// [object HTML VideoElement] from <div id="player">.
source = document.querySelectorAll("#player video source");
// Using the substring extracted from the user's click choice in <div id="playlist">
// the three file types for browsers to choose from are concatenated to the string.
// These thre source files are then stored under the video object located in <div id="player">.
source[0].src = filename + ".mp4";
source[1].src = filename + ".webm";
source[2].src = filename + ".ogv";
// The video object will load the appropriate source[].src file then play it
video.load();
video.play();
// When the video ends the following statement will call the function test()
// which will then broadcast the alert message "Video Ended"
document.getElementById('videoPlayer').addEventListener('ended',test,false);
// This statement will not call the handler function in order to play the next video selection.
// document.getElementById('videoPlayer').addEventListener('ended',handler,false);
}; // function handler(e)
function test(){
alert("Video Ended");
};
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Video Playlist Tutorial</title>
<style>
body {font-family:Arial, Helvetica, sans-serif;background:#fff}
.center {text-align:center;width:640px;margin:0 auto;}
#player {background:#000; padding:10px;width:640px;margin:0 auto;border-radius:10px;}
#player video {width:640px;}
#playlist {background:#333;list-style:none;padding:0;margin:0; width:640px;}
#playlist h1 {font: 24px Arial, Helvetica, sans-serif; color:#FFF; font-weight:bold;padding:5px 2px;margin:0;}
#playlist a {color:#eeeedd;background:#333;padding:10px 5px;display:block;text-decoration:none;border-bottom:1px solid #222;}
#playlist a:hover {text-decoration:none; background:#999;color:#000}
</style>
</head>
<body>
<div id="player"> <!-- Assign id to video tag for ended event and to call handler to play next video -->
<video id="videoPlayer" controls="controls" width="640" height="360" preload="auto" autoplay >
<source src="1.mp4" type="video/mp4" />
<source src="1.webm" type="video/webm" />
<source src="1.ogv" type="video/ogg" />
</video>
<div id="playlist">
<h1>Videos</h1>
Bear <br>
Buck Bunny
</div>
</div>
<script>
</script>
</body>
</html>

Seeing as your handler() function relies on this being the clicked element, you can't just call that function, you'd have to also set the this-value to the next anchor etc. and trigger the event in a way that makes it look like it was triggered by the actual element.
An easier way to do this, would be to just decouple the playing logic, get the next element, and play the video
var video_playlist = document.getElementById("player");
var links = video_playlist.getElementsByTagName('a');
for (var i = 0; i < links.length; i++) {
(function(j) {
links[j].addEventListener('click', function(e) {
handler.apply(this, [e, j])
});
})(i);
};
function handler(e, index) {
e.preventDefault();
var videotarget = this.getAttribute("href");
play(videotarget, index).addEventListener('ended', function() {
index = (++index) >= links.length ? 0 : index;
play(links[index].getAttribute("href"), index);
});
};
function play(videotarget) {
var filename = videotarget.substr(0, videotarget.lastIndexOf('.')) || videotarget;
var video = document.querySelector("#player video");
var source = document.querySelectorAll("#player video source");
video.removeAttribute("poster");
source[0].src = filename + ".mp4";
source[1].src = filename + ".webm";
source[2].src = filename + ".ogv";
video.load();
video.play();
return video;
};
<div id="player">
<!-- Assign id to video tag for ended event and to call handler to play next video -->
<video id="videoPlayer" controls="controls" width="640" height="360" preload="auto" autoplay>
<source src="1.mp4" type="video/mp4" />
<source src="1.webm" type="video/webm" />
<source src="1.ogv" type="video/ogg" />
</video>
<div id="playlist">
<h1>Videos</h1>
Bear
Buck Bunny
</div>
</div>

Cycle through audio using js

I'm trying to use a button to change the audio track to 1 of 2 being played in the browser, however, the method I found switches to the second track but doesn't change the audio played afterwards, it only restarts the second track. Here's my code:
function loadSong(){
var player=document.getElementById('player');
var source1=document.getElementById('player');
var source2=document.getElementById('player');
source1.src='/audio/mac+.mp3';
source2.src='/audio/mac-slowed.mp3';
player.load(); //just start buffering (preload)
player.play(); //start playing
}
HTML
<audio id="player" autoplay="autoplay" preload="auto" loop="loop">
<source id="source1" src="/audio/mac+.mp3" type="audio/mpeg">
<source id="source2" src="" type="audio/mpeg">
</audio>
<button onclick='loadSong()'>Switch the Music!</button>

Based on the information you provided in your original inquiry, this is most likely the best fit for you. Attached is a working JSFiddle for you review. You will need to update the src files with your own locally stored files.
HTML:
<audio id="source1" autoplay="autoplay" loop="loop" src='http://www.stephaniequinn.com/Music/Allegro%20from%20Duet%20in%20C%20Major.mp3'></audio>
<audio id="source2" loop="loop" src='http://www.stephaniequinn.com/Music/Pachelbel%20-%20Canon%20in%20D%20Major.mp3'></audio>
<button id="player">Switch the music to track # 2</button>
Javascript:
var player = document.getElementById('player');
var source1 = document.getElementById('source1');
var source2 = document.getElementById('source2');
player.onclick = function() {
curTrack = this.innerHTML.replace(/Switch the music to track # /, "");
if (curTrack == "1") {
nextTrack = "2";
source1.play();
source2.pause();
source2.currentTime = 0;
} else {
nextTrack = "1";
source2.play();
source1.pause();
source1.currentTime = 0;
}
this.innerHTML = "Switch the music to track # " + nextTrack;
}

You are overwriting the #player element look at your code you are saving the same selector to source1 and source 2 so change the selector of source one to source1 and source2

Reloading video.js player after changing source using jquery

I manage to make a script where I can change the video source without reloading the whole page, but the problem is that after the new source is loaded, the player is not and I only get a black box.
HTML:
<link href="//vjs.zencdn.net/4.12/video-js.css" rel="stylesheet">
<script src="//vjs.zencdn.net/4.12/video.js"></script>
<video id="example_video_1" class="video-js vjs-default-skin vjs-big-play-centered" controls autoplay preload="auto" width="850" height="400" data-setup='{"example_option":true}'>
<source id="videoMP4" src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
</video>
<div class="menu1">menu1</div>
<div class="menu2">menu2</div>
<div class="menu3">menu3</div>
<div class="menu4">menu4</div>
JavaScript:
$(".menu1").click(function() {
document.getElementById("example_video_1").innerHTML = "<source src=\"http:\/\/video-js.zencoder.com\/oceans-clip.mp4\" type='video\/mp4' \/>";
});
$(".menu2").click(function() {
document.getElementById("example_video_1").innerHTML = "<source src=\"http:\/\/techslides.com\/demos\/sample-videos\/small.mp4\" type='video\/mp4' \/>";
});
$(".menu3").click(function() {
document.getElementById("example_video_1").innerHTML = "<source src=\"http:\/\/video-js.zencoder.com\/oceans-clip.mp4\" type='video\/mp4' \/>";
});
$(".menu4").click(function() {
document.getElementById("example_video_1").innerHTML = "<source src=\"http:\/\/techslides.com\/demos\/sample-videos\/small.mp4\" type='video\/mp4' \/>";
});
Full code and example: http://codepen.io/BeBeINC/pen/PqydVM

Use the .load() function. You should pause it to prevent the audio from keeping on playing.
var video = document.getElementById('example_video');
var source = document.getElementById('videoMP4');
$("ELEMENT").click(function() {
video.pause()
source.setAttribute('src', 'NEW MP4');
video.load();
video.play();
});

You can do it like that
var player = videojs(document.querySelector('.video-js'));
player.src({
src: 'videoURL,
type: 'video/mp4'/*video type*/
});
player.play();

You should change the video's source using the player's API, specifically the src() method:
yourPlayer.src("http://foo.com/bar.mp4");

just do it this after you filled other attributes by JS:
$('#player')[0].load();

I Faced Similar Problem But Solved it By Changing the Poster source dynamically first then accessing the vjs poster class and changing its style, have a look at code :
$('#videoPlayer video').attr('poster', "https://dummyimage.com/hd1080");
document.querySelector("vjs-poster")[0].style.backgroundImage = "https://dummyimage.com/hd1080";

Play multiple audio files sequentially or randomly in background using HTML5 and javascript

I am trying to play 3 audio files (with the possibility of more later) that run in the background. At this point I am simply trying to play them sequentially and have it loop back to the first audio file when the last is played. I believe I have tried almost every solution or combination of functions and I just can't get it to work. I run into one of two problems:
If I try using repetition with each audio stored in the array, the page will successfully play the first then tries to play the next two simultaneously, rather than sequentially. And it certainly does not go back to the first. Furthermore, if you notice in my html, I have a seperate ID for each player. Would it be better to put them all in the sample player ID?
jQuery(document).ready(function (){
var audioArray = document.getElementsByClassName('playsong');
var i = 0;
var nowPlaying = audioArray[i];
nowPlaying.load();
nowPlaying.play();
while(true){
$('#player').on('ended', function(){
if(i>=2){
i=0;
}
else{
i++;
}
nowPlaying = audioArray[i];
nowPlaying.load();
nowPlaying.play();
});
}
});
On the other hand, I can play each sequentially but each play needs to be hardcoded for and I cannot loop back to the first
jQuery(document).ready(function (){
var audioArray = document.getElementsByClassName('playsong');
var i = 0;
var nowPlaying = audioArray[i];
nowPlaying.load();
nowPlaying.play();
$('#player').on('ended', function(){
// done playing
//alert("Player stopped");
nowPlaying = audioArray[1];
nowPlaying.load();
nowPlaying.play();
$('#player2').on('ended', function(){
nowPlaying = audioArray[2];
nowPlaying.load();
nowPlaying.play();
});
});
});
Here is my html
<audio id="player" class = "playsong">
<source src="1.mp3" />
</audio>
<audio id="player2" class = "playsong">
<source src="2.mp3" />
</audio>
<audio id="player3" class = "playsong">
<source src="3.mp3" />
</audio>
I am not terribly familiar with javascript, I am wondering if there is another event trigger function built into JS that I am not using? Some help is greatly appreciated.

HTML
<audio id="song-1" preload class="songs">
<source src="1.mp3" type="audio/mpeg" />
</audio>
<audio id="song-2" preload class="songs">
<source src="2.mp3" type="audio/mpeg" />
</audio>
<audio id="song-3" preload class="songs">
<source src="3.mp3" type="audio/mpeg" />
</audio>
<audio id="song-4" preload class="songs">
<source src="4.mp3" type="audio/mpeg" />
</audio>
JS
jQuery(document).ready(function (){
var audioArray = document.getElementsByClassName('songs');
var i = 0;
audioArray[i].play();
for (i = 0; i < audioArray.length - 1; ++i) {
audioArray[i].addEventListener('ended', function(e){
var currentSong = e.target;
var next = $(currentSong).nextAll('audio');
if (next.length) $(next[0]).trigger('play');
});
}
});

use webkit-playsinline in javascript

How do I use webkit-playsinline in javascript instead of in html5 video tag? I want to use it just like using video tag control/autoplay attribute in javascript or if you guys have any other method that is working? I'm working on a PhoneGap iOS app that stream video.
Below is some approach that I have tried but none are working:
videoPlayer.WebKitPlaysInline = "webkit-playsinline";
videoPlayer.WebKitPlaysInline = "WebKitPlaysInline";
videoPlayer.webkit-playsinline = "webkit-playsinline";
videoPlayer.WebKitPlaysInline = "true";
videoPlayer.WebKitPlaysInline = true;
videoPlayer.webkit-playsinline = "true";
videoPlayer.webkit-playsinline = true;
My current code(js):
function loadPlayer() {
var videoPlayer = document.createElement('video');
videoPlayer.controls = "controls";
videoPlayer.autoplay = "autoplay";
videoPlayer.WebKitPlaysInline = true;
document.getElementById("vidPlayer").appendChild(videoPlayer);
nextChannel();
}
My current code(html):
<body onload="loadPlayer(document.getElementById('vidPlayer'));"><!-- load js function -->
<li><span class="ind_player"><div id="vidPlayer"></div></span></li><!-- video element creat here -->
Any helps are much appreciate. Thanks.

You can do this without jQuery:
var videoElement = document.createElement( 'video' );
videoElement.setAttribute('webkit-playsinline', 'webkit-playsinline');
You have to activate this functionality in your iOs application's WebView :
webview.allowsInlineMediaPlayback = true;
You can check this post for more details:
HTML5 inline video on iPhone vs iPad/Browser

You need to attach it to the video element and set it as video's attribute
such as :
<video class="" poster="" webkit-playsinline>
<source src="" type="video/ogg" preload="auto">
<source src="" type="video/mp4" preload="auto">
</video>
so you could do (with jQuery) :
$('video').attr('webkit-playsinline', '');