I want to get the duration of video by javascript and this code doesn't work
<video id="myVideo">
<source src="">
</video>
<script>
var vid = document.getElementById("myVideo");
alert(vid.duration);
</script>
You need to wait for the file's metadata to load:
var vid = document.getElementById("myVideo");
vid.addEventListener('loadedmetadata', function() {
console.log(vid.duration);
});
Related
I'd like to randomly load a video on page load. I have three videos stored locally that I'd like to alternate between but can't seem to get any others except the first to play. I'm very new to Javascript and quite lost on what needs to be fixed...thanks for any help!
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
var videoStorage = [
'/vid/background-video-1.mp4',
'/vid/background-video-2.mp4',
'/vid/background-video-3.mp4'
],
video = document.querySelector('video'),
activeVideoUrl = videoStorage[Math.round(Math.random() * (videoStorage.length - 1))];
</script>
</head>
<body>
<div class="overlay">
<video autoplay muted loop id="background-video">
<source src="/vid/background-video-1.mp4" type="video/mp4">
<source src="/vid/background-video-2.mp4" type="video/mp4">
<source src="/vid/background-video-3.mp4" type="video/mp4">
</video></div>
Your activeVideoUrl is only set once on page load. Try using setInterval to update the value of activeVideoUrl.
You have to set src from this activeVideoUrl random selected url, you can set video type and play,
You can try this,
var videoStorage = [
'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4',
'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4'
],
video = document.querySelector('#background-video');
// DEFAULT PLAY ON PAGE LOAD
randomPlay();
// RANDOM PLAY FUNCTION
function randomPlay(){
let activeVideoUrl = videoStorage[
Math.round(Math.random() * (videoStorage.length - 1))
];
video.type = "video/mp4";
video.src = activeVideoUrl;
video.play();
}
<button onClick="randomPlay()">Random Play</button>
<div class="overlay">
<video autoplay muted loop id="background-video" height="150px"></video>
</div>
Needed to add document.addEventListener("DOMContentLoaded", function ()
document.addEventListener("DOMContentLoaded", function () {
var videoStorage = [
'/vid/background-video-1.mp4',
'/vid/background-video-2.mp4',
'/vid/background-video-3.mp4'
],
video = document.querySelector('#background-video'),
activeVideoUrl = videoStorage[
Math.floor(Math.random() * (videoStorage.length))
];
video.type = "video/mp4";
video.src = activeVideoUrl;
});
</script>```
I'm trying to make a random video player in html/js.
It is supposed to play a different video on pageload and as soon as one video is over, it should play another one.
HTML
<video width="320" height="240" autoplay>
<source src="abcdefg.com/example1.mp4" type="video/mp4">
<source src="abcdefg.com/example2.mp4" type="video/mp4">
</video>
JS
<script>
var videos = [
[{type:'mp4', 'src':'abcdefg.com/example1.mp4'}],
[{type:'mp4', 'src':'abcdefg.com/example2.mp4'}],
];
$(function() {
var number = Math.floor(Math.random()*videos.length);
$(this).find('source').each(function(index){
videoSrc = videos[number][index].src;
$(this).attr('src', videoSrc);
$('video').load();
$('video').play();
});
});
</script>
However, my current code plays the same video every page reload and as soon as it's over, nothing happens.
How do I need to optimize my code so it automatically plays a different video on every pageload + when the previous video is over?
Try this,I have added an event listener to video end property and called the newvideo() function ,so that every time the video finishes a new random video is loaded from array.I could'nt find more video urls ,you can test and let me know if it works for you.
$(document).ready(function(){
var videos = [
[{type:'mp4', 'src':'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4'}],
[{type:'mp4', 'src':'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4'}],
[{type:'mp4', 'src':'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4'}]
];
// selecting random item from array,you can make your own
var randomitem = videos[Math.floor(Math.random()*videos.length)];
// This function adds a new video source (dynamic) in the video html tag
function videoadd(element, src, type) {
var source = document.createElement('source');
source.src = src;
source.type = type;
element.appendChild(source);
}
// this function fires the video for particular video tag
function newvideo(src)
{
var vid = document.getElementById("myVideo");
videoadd(vid,src ,'video/ogg');
vid.autoplay = true;
vid.load();
//vid.play();
}
// function call
newvideo(randomitem[0].src)
// Added an event listener so that everytime the video finishes ,a new video is loaded from array
document.getElementById('myVideo').addEventListener('ended',handler,false);
function handler(e)
{
newvideo(randomitem[0].src)
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<video width="320" height="240" autoplay id="myVideo">
</video>
I can implement a poster at the beginning of a video using poster="beginning.jpg", but how to put a different image at the end of video? example image is like ending.jpg
<video controls width="100%" poster="beginning.jpg" >
<source src="video.mp4" />
</video>
here is jsfiddle
First add an Id to the video.
var video = document.getElementById('video');
var posterURL = 'end.jpg';
// Preload the end poster when the video starts to play
video.addEventListener('play', function() {
var image = new Image();
image.src = posterURL;
});
// Set and display the end poster
video.addEventListener('ended', function() {
video.poster = posterURL;
video.load();
});
Use ended, play events, .load()
<video width="100%" controls poster="/image/src/">
<source src="/video/src/" type="video/mp4" />
</video>
<script>
var video = document.querySelector("video");
video.onplay = function() {
this.setAttribute("poster", "") // remove `poster` image
video.onended = function(e) {
this.setAttribute("poster", "/new/image/src") // set new `poster` image
// call `.load()`
this.load();
}
</script>
jsfiddle https://jsfiddle.net/ey4tfp30/4/
I have a problem to get out the duration of an mp4 video file when the html document is ready. My code:
(function ($, root, undefined) {
$(function () {
'use strict';
$(document).ready(function() {
var duration = $("section:first-child() video").get(0).duration;
alert(duration);
});
});
});
The script works in firefox but in chrome it returns an NaN. Im not a javascript professional and i use wordpress HTML5 Blank theme.
Thanks for your help and best regards.
You need to preload the video metadata for you to be able to access them. Then, within the loadedmetadata event, you may access the duration as below.
$(function() {
var $video = $('#video_container').find('video');
$video.on("loadedmetadata", function() {
$('#duration').text($video[0].duration);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="video_container">
<video poster="http://media.w3.org/2010/05/sintel/poster.png" preload="metadata" controls="" width="400">
<source type="video/mp4" src="http://media.w3.org/2010/05/sintel/trailer.mp4" id="mp4"></source>
<source type="video/webm" src="http://media.w3.org/2010/05/sintel/trailer.webm" id="webm"></source>
<source type="video/ogg" src="http://media.w3.org/2010/05/sintel/trailer.ogv" id="ogv"></source>
<p>Your user agent does not support the HTML5 Video element.</p>
</video>
</div>
<div>Total duration : <span id="duration"></span></div>
you need a listener to get the duration of a video
var videoTime = 0;
var currentvideo = document.getElementById('video');
currentvideo.addEventListener('play', function() {
videoTime= currentvideo.duration;
console.info(videoTime) // get the duration
});
I saw some examples of defaultPlaybackRate and they say it work on Chrome. So I use their example codes and run on Chrome, it doesn't change the speed to 3.0x when I click the button. Anyone can tell me why?
Here my javascript code,
$(document).ready(function(){
var video = document.getElementById('video');
$("#speed").click(function() { // button function for 3x fast speed
video.defaultPlaybackRate=3.0;
});
});
The HTML codes,
<button id="speed" type="button">3.0x</button>
and
<video id="video" width="930" height="500" controls>
<source src="caption.mp4" type="video/mp4">
<source src="caption.ogg" type="video/ogg" >
<source src="caption.webm" type="video/webm" >
</video>
Because once you change the defaultPlaybackRate you have to load the video again using video.load(); (or set it before the video has loaded). If you want to change the rate while the video plays, use playbackRate instead.
var video = document.getElementById('video');
$("#speed").click(function () { // button function for 3x fast speed
video.defaultPlaybackRate = 3.0;
video.load();
});
or
var video = document.getElementById('video');
$("#speed").click(function () { // button function for 3x fast speed
video.playbackRate = 3.0;
});
jsFiddle example