I want to get duration from video links . it could be a youtube video as well as another video link. But youtube videos are playing in iframes and another are working in video tag. but im only able to fetch duration from video tag. How could get video duration from both iframe and video.
<button onclick="myFunction()" type="button">Get video length</button><br>
<video id="myVideo" width="320" height="176" controls>
<source src="https://dev.theappkit.co.uk/stylco/public/images/hair_styles/0_427_serena_grant_1619797376.mp4"
type="video/mp4">
Your browser does not support HTML5 video.
</video>
<script>
var vid = document.getElementById("myVideo");
function myFunction() {
alert(vid.duration);
}
</script>
<script type='text/javascript'>
document.getElementById('myVideo').addEventListener('ended', myHandler, false);
function myHandler(e) {
alert("ended");
}
</script>
Related
I want to check if user has unmuted or muted the video. I am using video html tag.
Is it possible to detect if user has unmuted or muted the video?
You can use Javascript to capture that event.
var video = document.querySelector('video');
video.addEventListener('volumechange', function () {
console.log('muted', video.muted);
}, false);
<video controls autoplay muted>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
I want to autoplay audio in my website as soon as I open my site. But it doesn't work.
<audio id="myAudio" autoplay>
<source src="./Welcome to Kitchen Nightmares..mp3" type="audio/ogg">
<source src="./Welcome to Kitchen Nightmares..mp3" type="audio/mpeg">
</audio>
<script>
function myFunction() {
var x = document.getElementById("myAudio").autoplay;
document.getElementById("demo").innerHTML = x;
}
myFunction();
Should start playing the audio file when the page loads, thanks to the autoplay attribute on the <audio> element. The buttons in the HTML code allow you to control the audio playback by calling the play() and pause() methods on the <audio> element.
Note that some browsers may not allow audio to automatically play on a website due to user experience and security concerns. In these cases, the user may need to explicitly start the audio playback by clicking on a button or some other element on the page.
<audio id="myAudio" autoplay>
<source src="./Welcome to Kitchen Nightmares..mp3" type="audio/ogg">
<source src="./Welcome to Kitchen Nightmares..mp3" type="audio/mpeg">
</audio>
<p>
<button onclick="playAudio()">Play Audio</button>
<button onclick="pauseAudio()">Pause Audio</button>
</p>
<script>
function playAudio() {
var audio = document.getElementById("myAudio");
audio.play();
}
function pauseAudio() {
var audio = document.getElementById("myAudio");
audio.pause();
}
</script>
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script>
function PlayMusic() {
var play=document.getElementById("music");
play.play();
}
$(document).ready(function(){
setTimeout(PlayMusic,3000);
})
</script>
</head>
<body>
<audio controls id="music" >
<source src="https://www.computerhope.com/jargon/m/example.mp3" type="audio/mpeg">
</audio>
</body>
</html>
After page load audio will play (1 sec delay).
URL The URL of the audio file. Possible values:
An absolute URL - points to another web site (like
src="http://www.example.com/horse.ogg")
A relative URL - points to a
file within a web site (like src="horse.ogg")
I'm trying to make video player with an autoplay but sound is not working.
Currently I'm using this but it doesn't work as expected:
var myaudio = document.getElementById("audioID");
function play() {
return myaudio.play();
}
function stop() {
return myaudio.pause();
}
<video width="260" height="180" controls muted id="audioID" autoplay volume="10">
<source src="{{ asset('video/laberspecicebymujb.mp4') }}" type="video/mp4">
<source src="{{ asset('video/laberspecicebymujb.ogg') }}" type="video/ogg">
Your browser does not support the video tag.
</video>
Google has new policies regarding autoplay.
you CAN'T enable both autoplay and sound on chrome browsers
Regarding volume, you need to set the volume on the onloadstart event like below:
<video onloadstart="this.volume=0.2" ...>
I have an embedded video on my site and am currently using the following code. I don't want the video to loop but it gives a black screen once the video is done playing. I know there is the poster option under the video tag but it only displays the thumbnail at the start of the video and not after it has finished playing.
Could you all help me out as to how should I add the thumbnail after the video is done playing?
<video controls autoplay poster="some_path">
<source src="some_video.mp4" type="video/mp4">
</video>
I see two ways to solve your issue.
This one will set your current frame to position 0 (the very first frame) after the video will end. You can set any frame you like. This solution is recommended.
<video controls id="myVideo" poster="test.jpg">
<source src="test.mp4" type="video/mp4" />
</video>
<script>
let myVideo = document.getElementById("myVideo");
myVideo.onended = function() {
myVideo.currentTime = 0;
};
</script>
The next one will reload the video source, so the poster will appear again. According to specification of poster in video it will be displayed only until the video starts once. After that, the only way to get the poster again - reload the video src, and a poster, just to make sure. Will work a little bit more stable.
<video controls id="myVideo" poster="test.jpg">
<source src="test.mp4" type="video/mp4" />
</video>
<script>
let myVideo = document.getElementById("myVideo");
myVideo.onended = function() {
myVideo.poster = "test.jpg"
myVideo.src = "test.mp4"
};
</script>
Is there any way of playing a sound/audio file continuously (using JavaScript) when a button (HTML) is pressed ?
i.e., as long as the button is pressed, the sound plays - once lifted the sound stops.
I've got the sound to play onclick - but obviously it stops after x amount of seconds.
Is there any way to keep it playing until lifted ?
Thanks :)
You can do this like below:
<button onmousedown="playVid()" onmouseup="pauseVid()" type="button">Play Video</button>
Code snippet:
var vid = document.getElementById("myVideo");
function playVid() {
vid.play();
}
function pauseVid() {
vid.pause();
}
<!DOCTYPE html>
<html>
<body>
<button onmousedown="playVid()" onmouseup="pauseVid()" type="button">Play Video</button>
<video id="myVideo" width="320" height="176">
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
<p>Video courtesy of Big Buck Bunny.</p>
</body>
</html>
You can try this with this link.