I want to use a video tag and control it with javascript,
but it doesn't work as I want.
function vidplay(evt) {
if (video.src == "") { // inital source load
getVideo();
}
button = evt.target; // get the button id to swap the text based on the state
if (video.paused) { // play the file, and display pause symbol
video.play();
button.textContent = "||";
} else { // pause the file, and display play symbol
video.pause();
button.textContent = ">";
}
}
// load video file from input field
function getVideo() {
var d = document.getElementById('a4').innerHTML; // video file name
// var fileURL = document.getElementById("videoFile").value; // get input field
var fileURL = d; // get input field
if (fileURL != "") {
video.src = fileURL;
video.load(); // if HTML source element is used
document.getElementById("play").click(); // start play
} else {
errMessage("Enter a valid video URL"); // fail silently
}
}
var d in function getVideo() is like "http://192.168.44.112/~/~.mp4"
This video was uploaded on mongoDB and I want to use it.
The video works well but the seek bar doesn't work at all,
it only seeks to time 0.
document.getElementById("rew").addEventListener("click", function() {
setTime(-10);
}, false);
document.getElementById("fwd").addEventListener("click", function() {
setTime(10);
}, false);
function setTime(tValue) {
// if no video is loaded, this throws an exception
try {
if (tValue == 0) {
video.currentTime = tValue;
} else {
video.currentTime += tValue;
}
} catch (err) {
// errMessage(err) // show exception
errMessage("Video content might not be loaded");
}
}
And when i use setTime() function, it goes to seek time 0, while I want to seek at the time corresponding to where I click .
How can I do it ?
I made this quick example that you can test & study, then afterwards you can just apply a similar logic to your above shown code. Hope it helps your problem.
<video id="myVid" width="640" height="480" controls>
<source src="yourVideoFile.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<script>
tValue = 0; //start at zero
myVid.addEventListener('seeking', function(e){ tValue = myVid.currentTime })
function setTime_FWD()
{
try
{
if (tValue >= myVid.duration) { tValue = myVid.duration; }
else { tValue += 10; myVid.currentTime = tValue; }
}
catch (err) { errMessage("Video content might not be loaded"); }
}
function setTime_RWD()
{
try
{
tValue -= 10;
if (tValue <= 0) { myVid.currentTime = tValue = 0; }
else { myVid.currentTime = tValue; }
}
catch (err) { errMessage("Video content might not be loaded"); }
}
</script>
<br><br>
<button onclick="setTime_RWD()"> << </button>
<button onclick="setTime_FWD()"> >> </button>
Related
My play/pause button works the first time I press pause and the first time I press play. But after that if I want to pause the slideshow again, it just plays the slideshow at a faster speed and I am no longer able to pause it.
I am thinking maybe it is to do with the fact I have two separate functions: one for the play/pause button icon toggle, and another for the actual play pause behaviour? (update: this has now been fixed, but still doesn't work)
Sorry, I am struggling with javascript, I have a lot to learn.
My script:
const playPause = document.querySelector('.pause');
let slideId;
// FUNCTION TO MOVE TO NEXT SLIDE
const moveToNextSlide = () => {
slides = getSlides();
if (index >= slides.length - 1) return;
index++;
slideGroup.style.transform = `translateX(${-slideWidth * index}px)`;
slideGroup.style.transition = '.8s';
}
// FUNCTION TO START SLIDESHOW
const startSlide = () => {
slideId = setInterval(() => {
moveToNextSlide();
}, interval);
playing = true;
};
// START AUTOMATIC SLIDESHOW UPON ENTERING THE PAGE
startSlide();
//PLAY PAUSE BUTTON - slideshow start/stop
playPause.addEventListener('click', () => {
if(!slideId) {
slideId = startSlide();
console.log('started');
} else {
clearInterval(slideId);
slideId = null;
console.log('stopped');
}
});
//PLAY PAUSE BUTTON - image change
function toggle(button) {
if (button.className != 'pause') {
button.src = 'img/pause.png';
button.className = 'pause';
}
else if (button.className == 'pause') {
button.src = 'img/play.png';
button.className = 'play';
}
return false;
}
HTML:
<input type='image' src='img/pause.png' class='pause' onclick='toggle(this);' />
This is what the console looks like when I try to pause the slideshow for a second time:
There are some details in your code that are missing and would be helpful to have, but I guess that you can get rid of the onclick handler and attach two event listeners:
let slideId;
// FUNCTION TO START SLIDESHOW
const startSlide = () => {
let interval = 2000; // using just as sample
playing = true;
return setInterval(() => {
console.log('moveToNextSlide();') // replaced just to test without missing code
}, interval);
};
//PLAY PAUSE BUTTON - slideshow start/stop
playPause.addEventListener('click', () => {
if(!slideId) {
slideId = startSlide();
console.log('started');
} else {
clearInterval(slideId);
slideId = null;
console.log('stopped');
}
});
//PLAY PAUSE BUTTON - image change
playPause.addEventListener('click', function toggle() { // the arrow function would not work in this case
var button = this;
if (button.className != 'pause') {
button.src = 'img/pause.png';
button.className = 'pause';
}
else if (button.className == 'pause') {
button.src = 'img/play.png';
button.className = 'play';
}
return false;
});
I want to play a video in a res of 720p (1280x720) with an autoplay and a loop whenever the video ends replace by another video in array.
the first video works fine, but it didn't autoplay, and after it end. it does not continue to play another video.
here's my code :
<div class="content-left">
<video controls id="myVideo" width="1280" height="720" autoplay></video>
<script>
var videoSource = new Array();
videoSource[0]='videos/bluevideo.mp4';
videoSource[1]='videos/redvideo.mp4';
videoSource[2]='videos/yellowvideo.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>
</div>
where did I do wrong? can anyone help me?thankyou very much.
You have a variable i which you increment in myHandler. However, it isn't declared anywhere. You should declare it outside the code of the event handler, and set the value to the first index:
var videoSource = new Array();
videoSource[0] = 'videos/bluevideo.mp4';
videoSource[1] = 'videos/redvideo.mp4';
videoSource[2] = 'videos/yellowvideo.mp4';
var videoCount = videoSource.length;
var i = 0;
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) {
i = 0;
videoPlay(i);
} else {
videoPlay(i);
}
}
I have an audio file and a javascript for it.
The javascript displays percentage of the audio buffered, if no buffered occurs it displays loading...
function loop2() {
var audio2 = document.getElementById("atwo1");
var percentages = document.getElementsByClassName("atwo1l")
var buffered = audio2.buffered;
var loaded;
if (buffered.length) {
loaded = 100 * buffered.end(0) / audio2.duration;
if (loaded.toFixed(2) != '0') {
percentages[0].innerHTML = 'Loading: ' + loaded.toFixed(2) + '%';
} else {
percentages[0].innerHTML = 'Loading....';
}
}
setTimeout(loop2, 50);
}
loop2();
<audio id="atwo1" controls="controls">
<source src="https://docs.google.com/uc?export=download&id=19gLpR7J8TVHmooVbM23eK5Xq0f9YXNZf">
</audio>
<p><span class="atwo1l"></span></p>
But for the above code, it does not displays loading...
When we place small audio file it will display. So why not for large files?
Update:
Found a partial answer (updated codes)
Why a partial answer?
All comments together in an answer
function loop2() {
var audio2 = document.getElementById("aone1"),
percentages = document.getElementsByClassName("aone1l"),
buffered,
loaded;
if (audio2 && percentages) { // if both elements are found in the DOM
buffered = audio2.buffered;
if (buffered.length) {
loaded = 100 * buffered.end(0) / audio2.duration;
if (loaded.toFixed(2) != '0') {
percentages[0].innerHTML = 'Loading: ' + loaded.toFixed(2) + '%';
}
if(loaded >= 1){
audio2.classList.remove('un-buffered');
}
} else { // handle the case where the buffered.length is 0 or undefined
percentages[0].innerHTML = 'Loading....';
}
}
setTimeout(loop2, 50);
}
I have a video playlist that plays videos one after a time.
I need the playlist to continue until it reaches a video with the name loop, and loop the video until one of the global variables lvl1_win or lvl2_loose (from a different script) turn 1.
Depending on the result, play a different playlist, playlist_lvl2 or playlist_lvl1_gameover
This is the Playlist I am currently using. It simply loops the videos one after a time:
var activeloop;
var myvid = document.getElementById('intro_lvl1');
myvid.addEventListener('ended', function (e)
{
var activesource = document.querySelector("#intro_lvl1 source.active");
var nextsource = document.querySelector("#intro_lvl1 source.active +
source") ||
document.querySelector("#intro_lvl1 source:first-child");
//for the video with the name "loop" in it.
var loopsource = document.querySelector("#intro_lvl1 source.loop");
activesource.className = "";
nextsource.className = "active";
myvid.src = nextsource.src;
myvid.play();
});
Could anybody give me a few suggestions on how to implement this?
You can use RegExp.prototype.test() to check if the .src contains "loop", set .loop to true
if (/loop/.test(nextsource.src)) {
// perform logic here
if (myvid.loop != true) {
myvid.loop = true
};
if (lvl1_win == 1 || lvl2_loose == 1) {
// do other stuff
}
}
Thank you for your answer!
I got it to work with the following:
var lvl1_win;
var lvl1_loose;
var myvid = document.getElementById('intro_lvl1');
myvid.addEventListener('ended', function (e) {
var activesource = document.querySelector("#intro_lvl1 source.active");
var nextsource = document.querySelector("#intro_lvl1 source.active +
source") || document.querySelector("#intro_lvl1 source:first-child");
if (/loop/.test(nextsource.src)) {
if (myvid.loop != true) {
myvid.loop = true;
};
if (lvl1_win == 1) {
alert("Won level 1");
}
if (lvl1_loose == 1) {
alert("Gameover level 1");
}
} else {
activesource.className = "";
nextsource.className = "active";
myvid.src = nextsource.src;
myvid.play();
}
});
However, I cannot add the specific video for winning or loosing in the same source, otherwise it would mess up the playlist.
Or is it possible to play the next video with the class loose if lost vise versa?
What I mean:
if (lvl1_loose == 1) {
play next video with class gameover
then play pause video on last frame (ending the cycle)
}
i want to play 2 sounds in ios and since it could not be done, i defined 2 audio objects.
i start playing the first sound and when want to play the second, i pause the first and wait till the second end, then i resume playing the first from the point it reached.
you can check the following code, if i remove the alert("test"); the first audio start playing from zero and so current time don't work!
kindly help.
Thanks,
var PlayedTime = 0; ; //in seconds
var AudioObj;
var audioType = '.mp3';
var isResume = false;
$(document).ready(function () {
if (!!AudioSound.canPlayType('audio/ogg') === true) {
audioType = '.ogg' //For firefox and others who do not support .mp3
}
AudioObj = document.getElementById('AudioSound');
document.getElementById('AudioSound').addEventListener('ended', function () {
resume();
});
});
function play1() {
AudioObj.src = "Images/Sound1" + audioType;
AudioObj.load();
}
function play2() {
PlayedTime = AudioObj.currentTime;
AudioObj.pause();
AudioObj.src = "Images/Sound2" + audioType;
AudioObj.load();
AudioObj.play();
}
function resume() {
isResume = true;
AudioObj.pause();
AudioObj.src = "Images/Sound1" + audioType;
AudioObj.load();
}
function JumpAudio() {
AudioObj.currentTime = 36;
}
function DataLoadedtoPlay() {
AudioObj.play();
if (isResume) {
isResume = false;
try {
alert("test");
AudioObj.currentTime = PlayedTime;
}
catch (e) {
alert("catch");
}
}
}
<div id="containerAud">
<audio id="AudioSound" onloadeddata="DataLoadedtoPlay()"></audio>
</div>
<input type = "button" onclick="play1()" value="click1"/>
<input type = "button" onclick="play2()" value="click2" />
<input type = "button" onclick="JumpAudio()" value="JumpAudio" />
</div>