How to add loop multiple HTML5 videos using jquery? - javascript

My requirement is i have to place N number of videos in same place and if one video ended then next video has to start like wise....
Here i have tried with four videos its not starting the second video.
Could you please help me
<script>
video_count =1;
videoPlayer = document.getElementById("ss");
function run(){
video_count++;
if (video_count == 4) video_count = 1;
var nextVideo = "video"+video_count+".mp4";
videoPlayer.src = nextVideo;
videoPlayer.play();
};
</script>
<video id="homevideo" width="100%" autoplay onended="run()">
<source id="ss" src="video1.mp4" type='video/mp4'/>
</video>

try to remove onended-tag and add javascript event. Does it help?
videoPlayer.onended(function(e) {
run();
};

try to use it help you?
**In Head tag:**
<script type="text/javascript" language="javascript">
video_count = 1;
function run() {
video_count++;
var videoPlayer = document.getElementById("homevideo");
if (video_count == 4)
video_count = 1;
var nextVideo = "ModelVideo/1/video" + video_count + ".mp4";
videoPlayer.src = nextVideo;
videoPlayer.load();
videoPlayer.play();
};
</script>
In Body tag:
<div style="width: 30%;">
<video id="homevideo" width="100%" controls autoplay onended="run()">
<source id="ss" src="ModelVideo/1/video1.mp4" type='video/mp4'/></video>
</div>

Related

How to dynamically display the video timestamp in html5 js

Ive this html code which reads a video file and plays it in browser. I want the video timestamp to be displayed dynamically but nothing is getting displayed in the browser.
<title>VIDEO PLAY</title>
<script src="http://vjs.zencdn.net/4.6.1/video.js"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"/>
<body>
<h1>VIDEO PLAY</h1>
<video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="268"
data-setup='{ "playbackRates": [0.5, 1, 1.5, 2, 4] }'>
<source src="movie.m4v" type='video/mp4' />
<track src='br.srt' kind="subtitles" srclang="en" label="English" default />
</video>
<script type="text/javascript">
var vid = document.getElementById("my_video_1");
var curTime=vid.currentTime;
</script>
<h1>
the value for number is:
<script type="text/javascript">
document.write(curTime)
</script>
</h1>
</body>
Solved by simply adding this after </video>
<p>TimeStamp: <span id="demo"></span></p>
<script>
// Get the audio element with id="my_video_1"
var aud = document.getElementById("my_video_1");
// Assign an ontimeupdate event to the audio element, and execute a function if the current playback position has changed
aud.ontimeupdate = function() {myFunction()};
function myFunction() {
// Display the current position of the audio in a p element with id="demo"
document.getElementById("demo").innerHTML = aud.currentTime;
}
</script>
You should use the event 'dateupdate':
function formatTime (time) {
let t = parseInt(time);
return parseInt(t/60) + ':' + (t%60 < 10 ? '0' + t%60 : t%60);
}
function setCurrentTime () {
let currentTime = getElementsByClassName('current-time')[0];
currentTime.innerHTML = formatTime(video.currentTime);
}
EventUtil.addHandler(video, 'timeupdate', getCurrentTime);

Video Lenght by JavaScript before uploading video file

I like to find out the video lenght from a local file on users desktop before uploading. The "video.onload" event didn't fire (see code) so I helped myself with a setTimeout once the video is loaded. But I don't like to use the setTimeout. Is there a cleaner way?
function handleFileSelect(evt) {
var files = evt.target.files; // FileList object
var output = [];
for (var i = 0, f; f = files[i]; i++) {
var video = document.getElementById('myVideo');
var obj_url = window.URL.createObjectURL(f);
video.src = obj_url;
console.log(f.name+ " " +f.type);
console.log(video.src);
video.onload = function() {
// It didn't work so I used delayedchk()
// window.URL.revokeObjectURL(this.src);
}
delayedchk();
}
}
document.getElementById('files').addEventListener('change', handleFileSelect, false);
function show(){
vid = document.getElementById("myVideo");
document.getElementById("laenge").innerHTML = Math.floor(vid.duration);
vid.play();
window.URL.revokeObjectURL(vid.src);
}
function delayedchk(){
var vdur = document.getElementById("myVideo").duration;
console.log(typeof vdur +' = '+vdur);
if( isNaN(vdur) ){
setTimeout(delayedchk,500);
}else{
show();
}
}
<!DOCTYPE html>
<html>
<body onload="show()">
<video id="myVideo" src="https://www.w3schools.com/tags/mov_bbb.mp4" type="video/mp4"></video>
<h1>Lenght: <span id="laenge"></span> sec.</h1>
<input type="file" id="files" name="files[]" multiple />
</body>
</html>
You can retrieve the video's duration property by listening to the loadedmetadata event:
var myVideoPlayer = document.getElementById('myVideo');
myVideoPlayer.addEventListener('loadedmetadata', function() {
document.getElementById('laenge').innerHTML = myVideoPlayer.duration;
});
<h1>Length: <span id="laenge"></span> sec.</h1>
<video id="myVideo" src="https://www.w3schools.com/tags/mov_bbb.mp4" type="video/mp4" autoplay></video>

html5 audio addeventhandler

I made a html5 audioplayer with a limited loop function, but I can't manage to keep this functionality when I want to replace the audioplayer with buttons and adding an eventhandler to them. In this example the checkbox had to be checked and the 2nd option of the selectmenu must be selected, before the repeatfunction works. Somehow the repeat-function stops working when I add:
"document.getElementById("Play").addEventListener("click", myFunction);". If I remove it, the code works, but only when I use the html audioplayer itself.
My code:
<!DOCTYPE html>
<html>
<body>
<span style="font-family:arial; font-size:16px;"><b>Pre:</b></span>
<input id="precount" type="checkbox"><br><br>
<span style="font-family:arial; font-size:16px;"><b>Repeat:</b></span>
<select>
<option id="ok1">1x</option>
<option id="ok2">2x</option>
<option id="ok3">3x</option>
</select><br><br>
<audio id="myAudio" controls>
<source src="http://u1259p183.web0080.zxcs.nl/jQuery.mmenu-master/demo/sortablemenumobile/range_items/audio_notes/10_a.mp3">
</audio>
<script>
function PlaySound(soundobj) {
var thissound=document.getElementById(soundobj);
thissound.play();
}
function PauseSound(soundobj) {
var thissound=document.getElementById(soundobj);
thissound.pause();
}
</script>
<form>
<input type="button" value="PlaySound" id="Play">
<input type="button" value="PauseSound" id="Pause">
</form>
<script>
document.getElementById("Play").addEventListener("click", function);
var loopLimit = 2;
var loopCounter = 0;
var aud = document.getElementById("myAudio");
aud.onended = function() {
if ((loopCounter < loopLimit) && (document.getElementById("ok2").selected==true) &&(document.getElementById("precount").checked==true)){
this.currentTime = 0;
this.play();
loopCounter++;
}
};
</script>
</body>
</html>
Change line with event listener, and put variable definitions before it:
var aud = document.getElementById("myAudio");
var loopLimit = 2;
var loopCounter = 0;
document.getElementById("Play").addEventListener("click", function (){
loopCounter = 0;
aud.play();
});

HTML5 Video: canPlayType() is not working in safari

I tried below code written on developer.apple.com but it throw error says:
TypeError: 'undefined' is not a function (evaluating 'myVideo.canPlayType(myTypes[i])')
<!doctype html>
<html>
<head>
<title>JavaScript Fallback</title>
<script type="text/javascript">
function checkPlaylist() {
var playAny = 0;
myTypes = new Array ("video/mp4","video/ogg","video/divx");
var nonePlayable = "Your browser cannot play these movie types."
var myVideo = document.getElementsByTagName('video')[0];
for (var i = 0, len = myTypes.length; i < len; x++) {
var canPlay = myVideo.canPlayType(myTypes[i]);
if ((canPlay == "maybe") || (canPlay == "probably"))
playAny = 1;
}
if (playAny == 0)
document.getElementById("video-player").innerHTML = nonePlayable;
}
</script>
</head>
<body onload="checkPlaylist()" >
<div id="video-player" align=center>
<video controls height="200" width="400">
<source src="myMovie.m4v" type="video/mp4">
<source src="myMovie.oga" type="video/ogg">
<source src="myMovie.dvx" type="video/divx">
</video>
</div>
</body>
</html>
Check your myTypes array parameter in Safari browser with below script:
<!DOCTYPE html>
<html>
<body>
<p>Can my browser play DIVX videos? <span>
<button onclick="supportType(event,'video/divx','H.264')" type="button">Test</button>
</span></p>
<p>Can my browser play MP4 videos? <span>
<button onclick="supportType(event,'video/mp4','avc1.42E01E, mp4a.40.2')" type="button">Test</button>
</span></p>
<p>Can my browser play OGG videos? <span>
<button onclick="supportType(event,'video/ogg','theora, vorbis')" type="button">Test</button>
</span></p>
<script>
function supportType(e,vidType,codType) {
var vid = document.createElement('video');
isSupp = vid.canPlayType(vidType+';codecs="'+codType+'"');
if (isSupp == "") {
isSupp = "No";
}
e.target.parentNode.innerHTML = "Answer: " + isSupp;
}
</script>
</body>
</html>
Are you in Safari for Windows? If so that will probably fail. Safari for windows is no longer supported by Apple.
Also you have var i = 0, len = myTypes.length; i < len; x++.
The last x should be i.

Playing a loop of videos by javascript

I am trying to write code to play a continous loop of two videos. I have tried to do so by this code, but it has not been done. Being new to html5 and javascript need help to make required corrections.
<!doctype html>
<html><head>
<script>
var videoSource = new Array();
videoSource[0]="videfirst.mp4";
videoSource[1]="videosecond.mp4";
var videoCount = videoSource.length;
document.getElementById("myVideo").setAttribute("src",videoSource[0]);
function videoPlay(videoNum)
{
document.getElementById("myVideo").setAttribute("src",videoSource [videoNum]);
document.getElementById("myVideo").load();
document.getElementById("myVideo").play();
}
document.getElementById('myVideo').addEventListener ('ended',myHandler,false);
function myHandler() {
i++;
if(i == (videoCount-1)){
i = 0;
videoPlay(i);
}
else{
videoPlay(i);
}
}
</script>
</head>
<body>
<video controls height="180" width="300" id="video" >
</video>
</body>
</html>

Categories

Resources