Thanks to Saar Davidson(This Answer) we know how to display duration of multiple videos on the page.
But, how can I convert the seconds shown to mm:ss format?!
here is the code which displays duration of video in seconds:
var videos = document.querySelectorAll(".mhdividdur");
var durationsEl = document.querySelectorAll(".mhdi_video_duration");
for(let i = 0; i < videos.length; i++) {
videos[i].onloadedmetadata = function() {
durationsEl[i].innerHTML = videos[i].duration;
};
}
<video class="mhdividdur" width="240px" controls preload="metadata" poster="http://cdn1.ko.cowa.ir//kocofeaturedimage.jpg">
<source src="http://cdn1.ko.cowa.ir//hwasa.mp4" type='video/mp4'>
</video>
<p class="mhdi_video_duration"></p>
<video class="mhdividdur" width="240px" controls preload="metadata" poster="http://cdn1.ko.cowa.ir//kocofeaturedimage.jpg">
<source src="http://cdn1.ko.cowa.ir//numb.mp4" type='video/mp4'>
</video>
<p class="mhdi_video_duration"></p>
There is NO NEED of any library. I have Updated the code.
Check it out:
var videos = document.querySelectorAll(".mhdividdur");
var durationsEl = document.querySelectorAll(".mhdi_video_duration");
for(let i = 0; i < videos.length; i++) {
videos[i].onloadedmetadata = function() {
var mzminutes = Math.floor(videos[i].duration / 60);
var mzseconds = Math.floor(videos[i].duration - (mzminutes * 60));
durationsEl[i].innerHTML = mzminutes+':'+mzseconds;
};
}
<video class="mhdividdur" width="240px" controls preload="metadata">
<source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4" type='video/mp4'>
</video>
<p class="mhdi_video_duration"></p>
<video class="mhdividdur" width="240px" controls preload="metadata">
<source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4" type='video/mp4'>
</video>
<p class="mhdi_video_duration"></p>
thank you Saar Davidson for the hints :)
Related
I want to make a website that shows different content every time the side gets reloaded. The content contains an image and an audio
I´ve found an script that randomizes my images after every reload but it plays all the sounds at the same time. I think I have to use an other tag than "ID" but since I am an absolute beginner I didn´t found the right one yet. Thanks in advace!
<!DOCTYPE html
<html>
<head>
<title>johannes</title>
<script language="javascript" type="text/javascript" src="random.js"></script>
</head>
<body>
<div id="spaghetti">
<img src="/Users/henrigimm/Documents/Johannes test/Illu Johannes/spaghetti.png">
<audio autoplay>
<source src="/Users/henrigimm/Documents/Johannes test/spaghetti.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</div>
<div id="bier">
<img src="/Users/henrigimm/Documents/Johannes test/Illu Johannes/bier.png">
<audio autoplay>
<source src="/Users/henrigimm/Documents/Johannes test/bier.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</div>
<div id="zelt">
<img src="/Users/henrigimm/Documents/Johannes test/Illu Johannes/zelt.png">
<audio autoplay>
<source src="/Users/henrigimm/Documents/Johannes test/zelt.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</div>
</body>
</html>
randomNumber = Math.floor(Math.random()*3+1);
window.onload = function() {
if (randomNumber == 1) {
document.getElementById("spaghetti").style.display = "inline";
document.getElementById("zelt").style.display = "none";
document.getElementById("bier").style.display = "none";
}
if (randomNumber == 2) {
document.getElementById("spaghetti").style.display = "none";
document.getElementById("zelt").style.display = "inline";
document.getElementById("bier").style.display = "none";
}
if (randomNumber == 3) {
document.getElementById("spaghetti").style.display = "none";
document.getElementById("zelt").style.display = "none";
document.getElementById("bier").style.display = "inline";
}
}
You can simplify this
const IDs = ["spaghetti","zelt","bier"];
const randomNumber = Math.floor(Math.random()*IDs.length);
document.getElementById(IDs[randomNumber]).style.display = "inline";
document.getElementById(IDs[randomNumber]+"Play").play();
and have css
#spaghetti,#zelt, #bier { display:none;}
or better give them all the same class and have
.audioLoad { display:none;}
Note I removed the autoplay and added an ID I could trigger
const IDs = ["spaghetti", "zelt", "bier"];
window.addEventListener("load", function() { // when page loads
const randomNumber = Math.floor(Math.random() * IDs.length);
document.getElementById(IDs[randomNumber]).style.display = "inline";
document.getElementById(IDs[randomNumber]+"Play").play();
})
.audioLoad {
display: none
}
img { height: 400px}
<html>
<head>
<title>johannes</title>
<script src="random.js"></script>
</head>
<body>
<div id="spaghetti" class="audioLoad">spaghetti
<img src="https://www.solo.be/uploadedimages/recepten/afbeeldingen/168335-spaghetti-bolognese.jpg">
<audio id="spaghettiPlay">
<source src="/Users/henrigimm/Documents/Johannes test/spaghetti.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</div>
<div id="bier" class="audioLoad">bier
<img src="https://static.ah.nl/static/gall/img_228761_Gall_500.png">
<audio id="bierPlay">
<source src="/Users/henrigimm/Documents/Johannes test/bier.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</div>
<div id="zelt" class="audioLoad">zelt
<img src="https://images.obi.at/product/DE/1500x1500/566276_3.jpg">
<audio id="zeltPlay">
<source src="/Users/henrigimm/Documents/Johannes test/zelt.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</div>
</body>
</html>
How can I get the id from many play buttons ?
I just get the last element when I alert the order.
I want do in the end something like:
videos[id].play();
instead of
video.play();
window.addEventListener("load", function(event) {
var videos = document.getElementsByTagName("video");
var btnsPlay = document.getElementsByClassName("btnPlay");
for (var i = 0; i < videos.length; i++)
{
var video = videos[i];
var btnPlay = btnsPlay[i];
// … find button objects and add listener …
btnPlay.addEventListener("click", function (event) {
var id = i;
video.play();
alert(id);
}); // …
}
});
<!DOCTYPE HTML>
<html lang="de">
<head>
<meta charset="utf-8">
</head>
<body>
<video width="20%" height="240" controls>
<source src=http://techslides.com/demos/sample-videos/small.webm type=video/webm>
<source src=http://techslides.com/demos/sample-videos/small.ogv type=video/ogg>
<source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4>
<source src=http://techslides.com/demos/sample-videos/small.3gp type=video/3gp>
Your browser does not support the video tag.
</video>
<div class ="controlbtn">
<button class="btnPlay">Play</button>
</div>
<video width="20%" height="240" controls>
<source src=http://techslides.com/demos/sample-videos/small.webm type=video/webm>
<source src=http://techslides.com/demos/sample-videos/small.ogv type=video/ogg>
<source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4>
<source src=http://techslides.com/demos/sample-videos/small.3gp type=video/3gp>
Your browser does not support the video tag.
</video>
<div class ="controlbtn">
<button class="btnPlay">Play</button>
</div>
<video width="20%" height="240" controls>
<source src=http://techslides.com/demos/sample-videos/small.webm type=video/webm>
<source src=http://techslides.com/demos/sample-videos/small.ogv type=video/ogg>
<source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4>
<source src=http://techslides.com/demos/sample-videos/small.3gp type=video/3gp>
Your browser does not support the video tag.
</video>
<div class ="controlbtn">
<button class="btnPlay">Play</button>
</div>
</body>
</html>
Try changing
for (var i = 0; i < videos.length; i++)
To
for (let i = 0; i < videos.length; i++)
The reason this problem is happening is because when the function is being invoked the value of i has already changed. You need to use let to have it saved at the block scope level and not at the function scope level
Hi I used HTML5 audio player and linked a mp3 file and autoplay functionality did . But it's time duration 37 minutes but it stop after 1 minute.
Here is my code jsfiddle
var audio1 = document.getElementById("player1");
var btn1 = document.getElementById("pButton1");
var pause_hover1 = document.getElementById("pause-hover");
var vid = document.getElementById("player1");
btn1.addEventListener("click", function(){
if (audio1.paused) {
audio1.play();
btn1.classList.remove("pause1");
btn1.classList.add("play1");
pause_hover1.style.display = "none";
} else {
audio1.pause();
btn1.classList.remove("play1");
btn1.classList.add("pause1");
pause_hover1.style.display = "block";
}
});
<audio loop id="player1" autoplay="true" src="http://downloadmotivations.com/wp-content/themes/downloadmotivation/Dream.mp3" type="audio/mpeg">
</audio>
<div id="audioplayer1">
<button id="pButton1" style="background: transparent;" class="play1"> audio</button>
</div>
I have changed your code to the following and it's working now at least at my end.
if you don't want control please remove controls from audio tag
var audio1 = document.getElementById("player1");
var btn1 = document.getElementById("pButton1");
var pause_hover1 = document.getElementById("pause-hover");
var vid = document.getElementById("player1");
btn1.addEventListener("click", function(){
if (audio1.paused) {
audio1.play();
btn1.classList.remove("pause1");
btn1.classList.add("play1");
pause_hover1.style.display = "none";
} else {
audio1.pause();
btn1.classList.remove("play1");
btn1.classList.add("pause1");
pause_hover1.style.display = "block";
}
});
<audio autoplay="true" controls id="player1">
<source src="http://downloadmotivations.com/wp-content/themes/downloadmotivation/Dream.mp3" type="audio/ogg">
<source src="http://downloadmotivations.com/wp-content/themes/downloadmotivation/Dream.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<div id="audioplayer1">
<button id="pButton1" style="background: transparent;" class="play1"> audio</button>
</div>
This question already has answers here:
HTML 5 video or audio playlist
(12 answers)
Closed 6 years ago.
I'm trying to get my website to play multiple mp3/songs, but it keeps playing soundtrack1, but I want it to play all 3 songs at the same time.
This is what I currently have:
<audio loop autoplay controls>
<source src="soundtrack1.mp3" type="audio/mpeg" loop="true">
<source src="soundtrack2.mp3" type="audio/mpeg" loop="true">
<source src="soundtrack3.mp3" type="audio/mpeg" loop="true">
Your browser does not support the audio element.
</audio>
So the HTML is as easy 1, 2, 3
<audio src="..." id="song1" volume="0.1" style="display: none;"></audio>
<audio src="..." id="song2" volume="0.1" style="display: none;"></audio>
<audio src="..." id="song3" volume="0.1" style="display: none;"></audio>
And the JS magic behind it:
for(var i = 1; i <= 3; i++)
{
document.querySelector("#song" + i)[0].play();
}
If you want to do it in only Javascript:
var song1 = new Audio();
var src1 = document.createElement("source");
src1.type = "audio/mpeg";
src1.src = "soundtrack1.mp3";
song1.appendChild(src1);
song1.play();
var song2 = new Audio();
var src2 = document.createElement("source");
src2.type = "audio/mpeg";
src2.src = "soundtrack2.mp3";
song2.appendChild(src2);
song2.play();
Using HTML5 I have 2 Audio elements and 1 video element on a page.
Quite simply I'd like to add JavaScript functionality that prevents them from being played simultaneosly.
My main problem is how to target the click events of the default player.
The HTML is below, thanks;
<section id="mp3Section">
<h2>MUSIC</h2>
<ul>
<li>Lovers Pass<audio id="audioLP" controls="controls" preload="auto" autobuffer>
<p class="redText">Sorry. Your browser does not support this audio element</p>
<source src="music/loversPass.mp3" />
<source src="music/loversPass.wav" />
</audio></li>
<li>All The Fun<audio id="audioATF" controls="controls" preload="auto" autobuffer="autobuffer">
<p class="redText">Sorry. Your browser does not support this audio element</p>
<source src="music/allTheFun.mp3" />
<source src="music/allTheFun.wav" />
</audio></li>
</ul>
</section>
<section id="videoSection">
<h2>Video</h2>
<video id="vidScreen" controls poster="images/vidThumb.jpg">
<source src="videos/loversPassOGV.ogg"/>
<source src="videos/loversPassVid.mp4" />
</video>
</section>
How I'd do it (using jQuery for simplicity, though not required):
$('audio,video').bind('play', function() {
activated = this;
$('audio,video').each(function() {
if(this != activated) this.pause();
});
});
The audio and video elements have events that you can catch. See for example https://developer.mozilla.org/En/Using_audio_and_video_in_Firefox .
You could probably do something like this (untested):
var allMediaIds = ["audioLP", "audioATF", "vidScreen"];
var allMedia = [];
for (var i = 0, len = allMediaIds.length; i < len; i++) {
allMedia.push(document.getElementById(allMediaIds[i]));
}
function loopAllMedia(callback) {
for (var i = 0, len = allMedia .length; i < len; i++) {
callback(allMedia[i]);
}
}
loopAllMedia(function(element) {
element.addEventListener("play", function() {
loopAllMedia(function(otherElement) {
if (element != otherElement)
otherElement.pause();
});
});
});