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();
});
Related
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>
I'm currently working on a piece of coursework for Computer Science where we need to automate a traffic light sequence using buttons e.g "Traffic Lights On" or "Traffic Lights off". When I run my program through the internet explorer debugger, I get the error code: "The value of the property 'Timer' is null or undefined, not a Function object" on line 5 of my coding even though I've defined it as a function later on in the script. My programming can be found below:
<!DOCTYPE html>
<html>
<body>
<p>
<button type="button" onclick="Timer()"> Start Lights</button>
<button type="button" onclick="StopTimer()"> Stop lights</button>
</p>
<img id = "TrafficLight" src="http://imgur.com/FHT9OoG.jpg">
<script>
var TrafficLightList = [
"http://imgur.com/FHT9OoG.jpg",
"http://imgur.com/XZ1PxGh.jpg",
"http://imgur.com/5DUX0Wy.jpg",
"http://imgur.com/WpeEMZU.jpg"
];
var Automation = 0;
var TimeBetweenChange = null;
function ChangeLightAutomated() {
if(Automation == TrafficLightList.length) Automation = 0;
var Light = document.getElementById("TrafficLight");
image.src = TrafficLightList[Automation];
image.alt = TrafficLightList[Automation] //debugger
Automation = Automation + 1;
}
function Timer() {
if(!TimeBetweenChange) {
TimeBetweenChange = self.setTimeBetweenChange(ChangeLightAutomated, 1000);
}
}
function StopTimer() {
self.clearTimeBetweenChange(TimeBetweenChange);
TimeBetweenChange = null;
}
</body>
</script>
</html>
As I've said before, the error appears to be on line 5 of the program as "Timer" is not defined even though I define what Timer's function is on line 28.
There are several undefined variables in your code, for example you do var Light = document.getElementById("TrafficLight"); and then image.src = TrafficLightList[Automation]; in which case image is undefined. Also, there's no self defined anywhere.
Here's a working example of what you wanted to do:
var timer = (function () {
var trafficLightList = [
"http://imgur.com/FHT9OoG.jpg",
"http://imgur.com/XZ1PxGh.jpg",
"http://imgur.com/5DUX0Wy.jpg",
"http://imgur.com/WpeEMZU.jpg"
];
var automation = 0;
var interval = null;
function changeLightAutomated() {
if(automation == trafficLightList.length) automation = 0;
var image = document.getElementById("TrafficLight");
image.src = trafficLightList[automation];
image.alt = trafficLightList[automation] //debugger
++automation;
}
function startTimer() {
interval = setInterval(changeLightAutomated, 1000);
}
function stopTimer() {
clearInterval(interval)
}
return {
start: startTimer,
stop: stopTimer
}
})()
document.getElementById('start').addEventListener('click', function() {timer.start()})
document.getElementById('stop').addEventListener('click', function() {timer.stop()})
<!DOCTYPE html>
<html>
<body>
<p>
<button type="button" id="start"> Start Lights</button>
<button type="button" id="stop"> Stop lights</button>
</p>
<img id = "TrafficLight" src="http://imgur.com/FHT9OoG.jpg">
<script>
</script>
</body>
</html>
Add ID's to the buttons:
<input type="button" id="button1_id" value="Some description" onclick="Timer()">
<input type="button" id="button1_id" value="Some description" onclick="StopTimer()">
I added a value too, so the button has text inside. Change 'Some description' to some suggestive text
And then, for each one do (on javascript):
var timerSelector = document.getElementById("button1_id");
timerSelector.onclick = Timer;
var stopTimerSelector = document.getElementById("button2_id");
stopTimerSelector.onclick = StopTimer;
or simply:
document.getElementById("button1_id").onclick= Timer;
document.getElementById("button2_id").onclick = StopTimer;
Add these lines to the javascript.
Let me know if it solved the problem.
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.
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>
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>