this is my video:
<video id="video1" autoplay="true" muted="true">
<source src="videos/test.mp4v" type="video/mp4">
</video>
If I removed the muted attribute, there is no sound! I don't know why. BUT what I want t achieve is when i press a button I want to unmuted my video.
This is my js code:
$(".play-pause").click(function(){
$("#video1").prop("volume", 0.5);
$("#video1").prop("muted", false);
});
So, first question why my video is muted by default ?
Second question how do I unmuted my video when i press a button ?
Thx a lot !
use this code
$(document).ready(function(){
$("#play-pause").click( function (){
if( $("#video1").prop('muted') )
{
$("#video1").prop('muted', false);
$("#video1").prop("volume", 0.5);
}
else {
$("#video1").prop('muted', true);
}
});});
To avoid the mute by default, just erase the "muted" attribute from the video tag.
To set the volume, put this inside your function:
var vid1 = $("video");
vid1.volume = 0.5;
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 1 year ago.
Improve this question
I'm trying to have a <video> autoplay on page load then pause 6 seconds into the video and stay like that.
I have the video playing fine, I'm just having a hard time with JavaScript to make the video pause automatically after 6 seconds of the DOM time.Anyone have code for how to do so?
You will have to use the onload event to do that here is an exemple:
<!DOCTYPE html>
<html>
<body>
<video id="myVideo" controls autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
<h1>Hello World!</h1>
<script>
const video = document.getElementById('myVideo');
video.onplay = function() {
window.setTimeout(()=>{
const video = document.getElementById('myVideo');
video.pause()
}, 6000)//6000ms = 6sec
}
</script>
</body>
</html>
Here you go, once the video is started the interval keeps firing that function which verify if the current time of the video is higher or equal to 6seconds and then does what you need.
;(function(){
if( !video ) return;
var videoInterval = null;
video.onplay = function() {
videoInterval = setInterval(_ => {
if( video.currentTime >= 6 /* 6 seconds */ ) video.pause();
else console.log( video.currentTime );
}, 1);
}
video.onpause = function() {
clearInterval(videoInterval);
videoInterval = null;
}
video.onend = video.onpause;
}());
<!DOCTYPE html>
<html>
<body>
<video id="video" muted controls autoplay>
<source src="https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mp4-file.mp4" type="video/mp4">
<source src="https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mp4-file.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</body>
</html>
We have some videos playing great in our HTML mobile app. However, our videos don't have sound, just subtitles, so we need to remove the volume slider and mute button but keep the timer bar.
Can this be done or toggled with HTML or CSS? Or is some javascript required to do this?
At the moment the setting within our html tag is just: controls="controls"
This has worked:
video::-webkit-media-controls-volume-slider {
display:none;
}
video::-webkit-media-controls-mute-button {
display:none;
}
Super easy:
Your html should be something like:
<video id="Video1">
<source src="..." type="video/mp4">
<source src="..." type="video/ogg">
Your browser does not support HTML5 video.
</video>
Add then a customized button to play the video:
<button id="play" onclick="vidplay()">></button>
Finally a progress bar:
<progress id="progressbar" value="0" max="100"></progress>
Then in javascript add a button to play
var video = document.getElementById("Video1");
function vidplay() {
var button = document.getElementById("play");
if (video.paused) {
video.play();
button.textContent = "||";
} else {
video.pause();
button.textContent = ">";
}
}
And a listener to update the progress bar:
video.addEventListener('timeupdate', updateProgressBar, false);
function updateProgressBar() {
var progressBar = document.getElementById('progressbar');
var percentage = Math.floor((100 / mediaPlayer.duration) * mediaPlayer.currentTime);
progressBar.value = percentage; progressBar.innerHTML = percentage + '% played';
}
So basically remove the "standard controls" and create your own ones.
If you wanted to achieve more complicated results, I would recommend you another option. This could be using a more configurable setting such as video.js.
Remove the controls attribute from the video element completely.
Try Here: http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_video_controls. Remove the "controls" attribute and the bar will disappear.
I want to be able to reload the video into the HTML5 video without having to reset the currentTime when it is loaded. The way I am currently doing it is the following:
<button onclick="getCurTime()" type="button">Get current time position</button>
<button onclick="setCurTime()" type="button">Set time position to 5 seconds</button><br>
<div style="width:800px; height:445px;">
<video id="myVideo" width="100%" height="100%" controls="controls">
<source src="http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4" type="video/mp4">
</video>
<script>
var vid = document.getElementById("myVideo");
function setCurTime() {
vid.currentTime=100;
}
$(document).ready(function ()
{
$('#myVideo').videocontrols(
{
preview:
{
sprites: ['big_bunny_108p_preview.jpg'],
step: 10,
width: 200
},
theme:
{
progressbar: 'blue',
range: 'pink',
volume: 'pink'
}
});
vid.play();
});
setInterval(function(){
if(vid.currentTime > vid.duration-1)
{
myVideo.src = "http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4";
myVideo.load();
myVideo.play();
vid.currentTime = vid.duration-60*5
}
}, 1);
</script>
</div>
How would I go about doing this? Is there even a way to just update the data in the video player without having to reload the video? I want to be able to do this so if someone makes a modification to the video, it will just update the data in the video player so the user doesn't have to reload the whole video again.
per discussion in comment thread above, I'm still not 100% sure why you're reloading the same video so I may be missing some context, but the following code will let you change the video source but preserve the current time. It does assume jQuery for the event handler (though you can easily use the regular javascript event handler on the same event to do the same thing)
<video id="v" width="320" height="240" controls="controls" mute>
<source src="Video.mp4" />
</video>
<button onclick="reload()">Reload</button>
<script>
function reload() {
vid=document.getElementById("v")
// record the current time for the video that is playing
curTime = vid.currentTime
// set the source for the replacement video...
vid.src = "http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4";
// ... and load it
vid.load();
// add event handler for "canplay" to set the time, and then start the video
$("#v").on("canplay",function() {
vid.currentTime = curTime
vid.play();
// remove the event to stop it triggering multiple times
$("#v").off("canplay")
})
}
</script>
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
I have a 5 video's and video player with 5 different buttons.
When I click on any one of the buttons it loads the video, but if I want to watch a different one I have to reload the page and click on one.
How can I fix it so that you can click on any video button at any time and still make the videos work. I think I need to make a mouse down statement, if so how would I go about writing one. Here is my html and JavaScript:
Html
<video id="myVideo" controls autoplay></video>
<div>
Demo Reel
Video1
Video2
Video3
Video4
</div>
JavaScript
var myVid = document.getElementById('myVideo');
var myVidContents1 = "<source src='video/demoreel.mp4' type='video/mp4'/> <source src='video/demoreel.webm' type='video/webm'/> <source src='video/demoreel.ogv' type='video/ogg'/>";
function addVideo1() {
myVid.innerHTML = myVidContents1;
}
var myVidContents2 = "<source src='video/video1.mp4' type='video/mp4'/> <source src='video/video1.webm' type='video/webm'/> <source src='video/video1.ogv' type='video/ogg'/>";
function addVideo2() {
myVid.innerHTML = myVidContents2;
}
var myVidContents3 = "<source src='video/video2.mp4' type='video/mp4'/> <source src='video/video2.webm' type='video/webm'/> <source src='video/video2.ogv' type='video/ogg'/>";
function addVideo3() {
myVid.innerHTML = myVidContents3;
}
var myVidContents4 = "<source src='video/video3.mp4' type='video/mp4'/> <source src='video/video3.webm' type='video/webm'/> <source src='video/video3.ogv' type='video/ogg'/>";
function addVideo4() {
myVid.innerHTML = myVidContents4;
}
var myVidContents5 = "<source src='video/video4.mp4' type='video/mp4'/> <source src='video/video4.webm' type='video/webm'/> <source src='video/video4.ogv' type='video/ogg'/>";
function addVideo5() {
myVid.innerHTML = myVidContents5;
}
Try this:
function addVideo1() {
myVid.innerHTML = myVidContents1;
return false;
//This over-rides the default link behaviour,
// so the browser doesn't scroll to the top of the page instead of firing your code
}
After you create the new source tags, you need to force the video element to load the new sources, like so:
myVid.load();
See:
trying to add a multi source video player with more then one video?
Your click handlers should work just fine, but there may be some strange UX side effects. You're probably better off using a tag other than "a", such as "span" or "button", and then you can set the click handler in javascript:
document.getElementById('link1').addEventListener('click', addVideo1, false);
// etc...
Don't leave off that third "false" argument, otherwise your code will break in older versions of Firefox.