I have a video file in my design which has length of 2min. For the first time the video will play from the beginning and then the video have to play from 1.00 sec to 2.00 sec in loop. Is this possible to do using jquery? I have tried alternative methods. It works but there is a jump in video. Change video source after the first video ends.
Here are the code I have:
JQuery:
document.getElementById('bgvid').addEventListener('ended', myHandler, false);
function myHandler(e) {
//*what to do?*//
}
HTML:
div class="anim-logo ">
<video playsinline autoplay muted poster="assets/img/video3.jpg" id="bgvid">
<source src="assets/img/video3.webm" type="video/webm">
<source src="assets/img/video3.mp4" type="video/mp4">
</video>
</div><!--end of anim logo-->
You can do something like this:
var video = document.getElementById('videoElm')
video.addEventListener('ended',function(){
// set the video's start position to the video's duration minus 10 seconds. "video.currentTime" is in milliseconds, "video.duration" is in seconds
video.currentTime = (parseInt(video.duration) - 10) * 1000;
video.play();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<video id="videoElm" autoplay muted>
<source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/webm">
</video>
</div>
Related
I am displaying a video on my website like this:
<video>
<source src={link} type="video/mp4" />
</video>
And I would like to extract duration of the video from the provided src link, to display it somewhere else on the page. Assume we have the link stored as a string, how will I extract the duration of the video?
Sample src link: https://firebasestorage.googleapis.com/v0/b/qriositynet-dev.appspot.com/o/chat%2FMgttfKqKIDhQ6bgtgy6V%2Fvideos%2F1663229371400watermelon-bunny.mp4?alt=media&token=722bb260-c65b-46fe-8805-4a5a742f282d
to get the duration of the video you have to wait for it to load using the event listener and that way you are sure you have the data, this is a link you can use to help you learn more about the API, here.
let video = document.getElementById("video")
video.addEventListener('loadeddata', function() {
console.log("test", video.duration)
// Video is loaded and can be played
}, false);
function myFunction() {
alert(video.duration);
}
myFunction
<html>
<h1>video duration</h1>
<button onclick="myFunction()" type="button">Get video length</button><br>
<video id="video">
<source src="https://firebasestorage.googleapis.com/v0/b/qriositynet-dev.appspot.com/o/chat%2FMgttfKqKIDhQ6bgtgy6V%2Fvideos%2F1663229371400watermelon-bunny.mp4?alt=media&token=722bb260-c65b-46fe-8805-4a5a742f282d" type="video/mp4" />
</video></html>
The video tag has a "duration" property, which will tell you the length of a video.
https://www.w3schools.com/tags/av_prop_duration.asp
<html>
<body>
<button onclick="myFunction()" type="button">Get video length</button><br>
<video id="myVideo" width="320" height="176" controls>
<source src="https://firebasestorage.googleapis.com/v0/b/qriositynet-dev.appspot.com/o/chat%2FMgttfKqKIDhQ6bgtgy6V%2Fvideos%2F1663229371400watermelon-bunny.mp4?alt=media&token=722bb260-c65b-46fe-8805-4a5a742f282d" type="video/mp4">
</video>
<script>
function myFunction() {
let vid = document.getElementById("myVideo");
alert(vid.duration);
}
</script>
</body>
</html>
I am trying to figure out how to play my 'animation' video at a delay. It needed to have a transparent background and no controller, so like a gif.
I figured video is the only solution, however now it's either running in a loop or running once.
Example image:
<div id="nee">
<video poster="" id="bgvid" playsinline muted>
<source src=" rendermirror.webm" type="video/webm">
<source src="rendermirror.mov" type="video/mp4">
</video>
Also tried using an interval, but i don't get it to work properly.
var video = document.getElementById("bgvid");
video.addEventListener("canplay", function() {
setTimeout(function() {
video.play();
}, 5000);
});
If anyone has any tips, would be really appreciated.
Cheers,
I pause the video when load and the video plays after 5s
var video = document.getElementById("myVideo");
// pause video event
video.pause();
video.addEventListener("canplay", function() {
setTimeout(function() {
video.play();
}, 5000);
});
<video id="myVideo" width="320" height="176">
<source src="http://www.w3schools.com/tags/mov_bbb.mp4" type="video/mp4">
</video>
if you want to loop the video then you will need to add change this
var video = document.getElementById("myVideo");
// pause video event
video.pause();
video.addEventListener("canplay", function() {
setTimeout(function() {
video.play();
}, 5000);
});
<video id="myVideo" width="320" height="176" loop>
<source src="http://www.w3schools.com/tags/mov_bbb.mp4" type="video/mp4">
</video>
I'm working on a webpage with videos.
When refraishing the page, I want to randomly start a muted video. After rolling on it, the video is unmute.
I've already done the randomly videos javascript but I can't mute the video...
When I launch the page, the video starts with sound...
Here is my code :
<div id="mixmen" onmouseover="play()" onmouseout="mute()" onclick="location.href='http://ap-mixmen.com/','_blank'" >
<div class="video">
<section id="videos">
<video id="videos" preload="none" style="height:100%">
<source src="imgs/mixmen.mp4" type="video/mp4"></video>
<video id="videos" preload="none" style="height:100%">
<source src="imgs/mixmen2.mp4" type="video/mp4"></video>
<video id="videos" preload="none" style="height:100%">
<source src="imgs/mixmen3.mp4" type="video/mp4"></video>
<video id="videos" preload="none" style="height:100%">
<source src="imgs/mixmen4.mp4" type="video/mp4"></video>
</section>
</div>
<script>
(function () {
"use strict";
document.getElementById("videos").muted = true;
var videosSection = document.getElementById("videos");
var videosSectionClone = videosSection.cloneNode();
var videos = videosSection.getElementsByTagName("video");
var randomVideo = videos.item(Math.floor(Math.random() * videos.length)).cloneNode(true);
randomVideo.removeAttribute("controls");
randomVideo.setAttribute("preload", "auto",);
videosSectionClone.appendChild(randomVideo);
videosSection.parentNode.replaceChild(videosSectionClone, videosSection);
randomVideo.play();
})();
var videosSection = document.getElementById("videos");
function play()
{
video.muted = false;
}
function mute()
{
video.muted = true;
}
</script>
</div>
Do you know why it doesn't work ?
try adding muted to the video tag
Ex:
Try adding "muted" to the video tags.
<video id="videos" preload="none" muted style="height:100%">
<source src="imgs/mixmen.mp4" type="video/mp4"></video>
Hi First section id must be different to your video tags then your video tags also must have a different id and finally you apply the "muted=true" to your selected element . If you want to mute all videos on the page load you can access to them by tag name then apply the mute as follow :
const videos= [...document.getElementsByTagName('video')];
videos.forEach((video) => { video.muted = true });
In my page i have an autoplaying piece of audio, however i need to volume to be set to a specific level just incase a user has their volume up at 100%. Any idea on how to do this
HTML Code:
<audio autoplay>
<source src="Media File here">
</audio>
You can use the volume attribute:
<audio autoplay="autoplay" volume="0.5">
<source src="Media File here">
</audio>
values can be from 0.0 (silent) to 1.0 (loudest)
update
It seems like the volume attribute is not well-implemented, so here is a workaround:
audio_tags = document.getElementsByTagName('audio')
for (var i = 0; i < audio_tags.length; i++) {
audio_tags[i].addEventListener("loadstart", function() {
this.volume = this.getAttribute('volume');
}, true);
}
<audio controls="controls" volume="0.1">
<source src="https://upload.wikimedia.org/wikipedia/commons/c/c8/Example.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
<br /><br />
<audio controls="controls" volume="0.9">
<source src="https://upload.wikimedia.org/wikipedia/commons/c/c8/Example.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
For my website, I wanted a specific video to play, once a condition is met.
e.g (If x = 1, play the video)
I have this code in the HTML file:
<div id="video">
<video width="320" height="240" autoplay,>
<source src=video_mp4 type="video/mp4">
<source src=video_ogg type="video/ogg">
Your browser does not support the video tag.
</video>
</div>
And in the JavaScript file:
document.getElementById("video").innerHTML.source.src = video_mp4;
document.getElementById("video").innerHTML.source.src = video_ogg;
But it doesn't seem to work.
You can use the following :
<video id="video1" src="vid.mp4"></video>
<script>
function playVideo(){
var video= document.getElementById("video1");
video.load();
video.play();
}
</script>