I'm using html5 video player to play some videos and trying to use external controls with javascript. manage to get the player play and pause. but i cannot get it to mute and unmute using the buttons. if someone can help with this matter its highly appropriated.
Here is the HTML code
<video id="myMovie" width="600" height="600" loop preload="auto" video poster="img.jpg" controls>
<source src="my-video-file.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<button id="playButton">Play</button>
<button id="volButton">Mute</button>
JavaScript Code
function playMymovie() {
var element = document.getElementById('myMovie');
var element = document.getElementById('pbutton');
playButton.addEventListener('click', PlayOrPause, false);
volButton.addEventListener('click', VolMute, false);
}
function PlayOrPause() {
if(!myMovie.paused && !myMovie.ended) {
myMovie.pause();
}else{
myMovie.play()
}
}
function VolMute(){
if(!myMovie.muted){
myMovie.muted(true);
}else{
myMovie.muted(false);
}
}
Thanks in advance.
<html>
<body>
<div style="text-align:center">
<button onclick="playPause()">Play/Pause</button>
<button onclick="muteUnMute()">Mute/UnMute</button>
<br>
<video id="video1" width="420">
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
</div>
<script>
var myVideo=document.getElementById("video1");
function playPause()
{
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
function muteUnMute()
{
if( !myVideo.muted)
myVideo.muted='muted';
else
myVideo.muted=false;
}
</script>
</body>
</html>
Try this:
var videoObject = document.getElementById('myMovie');
videoObject.muted = !videoObject.muted;
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 try to do this with many different way but i didn't get the result i want so can anyone help
<div style="width:500px;height:500px;">
<video controls autoplay width="400" height="400">
<source src="video/2.mp4" type="video/mp4">
</video>
</div>
and here is the only answer i found when i search but i dont understand it well and there is jquery on it i want to make it pure javascript
var figure = $(".video");
var vid = figure.find("video");
[].forEach.call(figure, function (item,index) {
item.addEventListener('mouseover', hoverVideo.bind(item,index), false);
item.addEventListener('mouseout', hideVideo.bind(item,index), false);
});
function hoverVideo(index, e) {
vid[index].play();
}
function hideVideo(index, e) {
vid[index].pause();
}
The answer is pretty simple:
document.getElementById("myVid").addEventListener("mouseover", function() {
this.play();
});
document.getElementById("myVid").addEventListener("mouseleave", function() {
this.pause();
});
<div style="width:500px;height:500px;">
<video id="myVid" controls autoplay width="400" height="400">
<source src="https://www.w3schools.com/tags/mov_bbb.mp4" type="video/mp4">
</video>
</div>
This should work for you.
You can find more information here about HTML5 video API.
const videoPlayer = document.querySelector('.videoplayer');
videoPlayer.addEventListener('mouseover', () => {
videoPlayer.play();
});
<p>Hover canvas to play the video</p>
<video class="videoplayer" width="320" height="240">
<source src="https://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.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 });
I am making a webpage that has two videos on it. I want each video to play when its poster image is clicked on. To do this, I added the script below to each video, and changed the id for each to "video1" and "video2".For some reason both videos play and stop the second video. I can't see why. Below is my code:
HTML
<div class="fade">
<button onclick="playPause()">
<video id="video1" width="350px" height="250" poster="images/video-
poster-2.jpg" controls>
<source src="videos/pup-head-lite-video.mp4" type="video/mp4">
<source src="videos/pup-head-lite-video.webmhd.webm" type="video/webm">
Your browser does not support this video.
</video>
</div>
<br/>
<br/>
<div class="fade">
<button onclick="playPause()">
<video id="video2" width="350px" height="250" poster="images/video-
poster.jpg" controls>
<source src="videos/original-portable-dog-potty.mp4" type="video/mp4">
<source src="videos/original-portable-dog-potty.webm"
type="video/webm">
Your browser does not support this video.
</video>
</div>
SCRIPTS
<script>
var myVideo=document.getElementById("video1");
function playPause()
{
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
</script>
<script>
var myVideo=document.getElementById("video2");
function playPause()
{
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
</script>`
NEW CODE
<div class="fade">
<button onclick="playPause('video1')">
<video id="video1" width="350px" height="250"
poster="images/video-poster-2.jpg" controls>
<source src="videos/pup-head-lite-video.mp4"
type="video/mp4">
<source src="videos/pup-head-lite-video.webmhd.webm"
type="video/webm">
Your browser does not support this video.
</video>
</div>
<br/>
<br/>
<div class="fade">
<button onclick="playPause('video2')">
<video id="video2" width="350px" height="250"
poster="images/video-poster.jpg" controls>
<source src="videos/original-portable-dog-potty.mp4"
type="video/mp4">
<source src="videos/original-portable-dog-potty.webm"
type="video/webm">
Your browser does not support this video.
</video>
</div>
</div>
<script>
function playPause(video)
var myVideo=document.getElementById("video");
{
if (myVideo.paused)
myVideo.play();
}else
myVideo.pause();
}
}
</script>
You're having issues because you are using the same variable to refer to the video in both cases. You repeated yourself a little bit in your code, so I tried to cut out those bits. Let me know if you have any issues.
<div class="fade">
<button onclick="playPause('video1')">
<video id="video1" width="350px" height="250" poster="images/video-
poster-2.jpg" controls>
<source src="videos/pup-head-lite-video.mp4" type="video/mp4">
<source src="videos/pup-head-lite-video.webmhd.webm" type="video/webm">
Your browser does not support this video.
</video>
</div>
<br/>
<br/>
<div class="fade">
<button onclick="playPause('video2')">
<video id="video2" width="350px" height="250" poster="images/video-
poster.jpg" controls>
<source src="videos/original-portable-dog-potty.mp4" type="video/mp4">
<source src="videos/original-portable-dog-potty.webm"
type="video/webm">
Your browser does not support this video.
</video>
</div>
<script>
function playPause(video)
{
var myVideo=document.getElementById(video);
if (myVideo.paused) {
myVideo.play();
} else {
myVideo.pause();
}
// you could consolidate the above if/else to be:
// myVideo.paused ? myVideo.play() : myVideo.pause();
}
</script>
Your problem comes from the fact that you use the same names for everything:
<script>
var myVideo=document.getElementById("video1"); // Creates variable myVideo
function playPause() // Creates a function called playPause
{
// Plays or pauses "myVideo"
}
</script>
<script>
var myVideo=document.getElementById("video2"); // Overrides the value of "myVideo" to point to video2 instead
function playPause()
{
// Plays or pauses "myVideo"
}
</script>
So when you actually call playPause, myVideo has always been set to point to video2.
I suggest that you pass the ID of the video you want to play or pause when you call playPause, and that you only define playPause once - that second definition is totally redundant, since it's the exact same code.
function playPause(videoId) {
var myVideo=document.getElementById(videoId);
if (myVideo.paused) {
myVideo.play();
} else {
myVideo.pause();
}
}
Then your buttons can be rewritten to be
<button onclick="playPause('video1')">
<button onclick="playPause('video2')">
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>