I am building a custom controls HTML5 video player. You can see it HERE.
The problem I ran into is being unable to display the video's duration before playing it.
The HTML:
<div class="video-container">
<video poster="img/flamenco.jpg">
<source src="flamenco.mp4" type="video/mp4" />
<source src="flamenco.ogg" type="video/ogg" />
</video>
<div class="controls-wrapper">
<div class="progress-bar">
<div class="progress"></div>
</div>
<ul class="video-controls">
<li><input type="button" name="play-pause" value="Play" class="play"></li>
<li><input type="button" name="prev" value="Previous video" class="previous"></li>
<li><input type="button" name="next" value="Next video" class="next"></li>
<li class="mute-toggle unmuted"><input type="checkbox" name="mute" value="Mute"></li>
<li class="volume-container"><input class="volume-slider" type="range" value="1" max="1" step="0.01"></li>
<li class="show-time disable-select"><span class="current-time">00:00</span><span>/</span><span class="duration"></span></li>
<li class="fullscreen-container"><input type="button" name="toggle-fullscreen" value="Fullscreen" class="fullscreen"></li>
</ul>
</div>
</div>
The JavaScript:
var currentTimeDuration = function(){
var currTimeStr = Math.round(video.currentTime).toString();
var durationStr = Math.round(video.duration).toString();
$('.current-time').text(currTimeStr.timeFormat());
$('.duration').text(durationStr.timeFormat());
}
$(video).on('timeupdate', function(){
currentTimeDuration();
});
The problem with the function above is that it only displays the current time and duration of the video after it has started. I wish it would show something like 00:00 / 02:22 on page load.
Any hints? Thank you!
video.duration is correct after 'loadedmetadata' event. Try to add metadata loaded handler:
$(video).on('loadedmetadata', function(){
currentTimeDuration();
});
Related
I am hoping someone can help me out with my problem
im struggling to find a code to enable the autoplay video and audio at the same time in google chrome?
also this putting silence.mp3 is not working anymore on chrome.
<iframe src="./images/silence.mp3" allow="autoplay" id="audio" style="display:none" id="iframeAudio"></iframe><iframe src="./images/silence.mp3" allow="autoplay" id="audio" style="display:none" id="iframeAudio"></iframe>
<audio autoplay loop id="video_bg_plays" class="myaudio">
<source src="./images/Wizard101_audio.mp3?autoplay=1&loop=1&muted=0" type="audio/mp3" >
</audio>
<div id="video_bg">
<div style="background:url('./images/bg2.png') no-repeat top center;z-index:-3;position:absolute;width:100%;min-width:310px;height:100%" class="js-bg-video"></div>
<video autoplay muted loop id="video_bg_play" class="hide viewer">
<source src="./images/Wizard101.mp4?autoplay=1&loop=1&muted=0" type="video/mp4">
</video>
<div class="player__controls">
<!--<div class="progress">
<div class="progress__filled"></div>
</div>-->
<button class="player__button toggle" title="Toggle Play">►</button>
<!--<input type="range" name="volume" class="player__slider" min="0" max="1" step="0.05" value="1">
<input type="range" name="playbackRate" class="player__slider" min="0.5" max="2" step="0.1" value="1">
<button data-skip="-10" class="player__button">« 10s</button>
<button data-skip="25" class="player__button">25s »</button>
</div>-->
</div>
</div>
The only workaround I have found recently was below:
navigator.mediaDevices.getUserMedia({ audio: true }).then(function (stream) {
var vid = document.getElementById("video_bg_plays");
vid.play(); // play your media here then stop the stream when done below...
stream.getTracks().forEach(function (track) { track.stop(); });
});
It will ask users for their Microphone permission and they have to click Allow once then you are permitted to play anything with sound. It works because as long as you are capturing then you are allowed to autoplay sound, without any user gesture needed.
So I am helping my gf with her Uni project. She is a graphic designer and she needed some help with creating a webpage with a video comics.
I made it so that the videos would play on hover with Javascript (this is the first time ever I had to use JS) and now I need a way to bind some of them together - e.g. you hover on one or the other and both play, you remove the mouse and both stop. And I need to do it several times. The website will contain a total of 24 Videos.
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('.video').each(function() {
$(this).on("mouseover", function(e) { hoverVideo(e); });
$(this).on("mouseout", function(e) { hideVideo(e); });
});
});
function hoverVideo(i) {
i.target.play();
}
function hideVideo(i) {
i.target.pause();
}
</script>
</head>
<body>
<div class="main">
<h3>Title</h3>
<p>
*Hover over each frame to see the story.
</p>
</div>
<div class="main">
<div class="firstrow">
<div class="video" id="one" >
<video class="thevideo" loop>
<source src="Resources/1.mp4" type='video/mp4' />
</video>
</div>
<div class="video" id="one" >
<video class="thevideo" loop>
<source src="Resources/2.mp4" type='video/mp4' />
</video>
</div>
<div class="video" id="one" >
<img src="Resources/text/tap.svg" />
</div>
</div>
</div>
</body>
I would go with mouse enter and leave events to avoid redudancy of triggering the execution everytime your mouse is inside the video with movements
$(".thevideo").mouseenter(function(){
console.log("mouse is entered");
$(".thevideo").each(function(){
this.play();
})
})
$(".thevideo").mouseleave(function(){
$(".thevideo").each(function(){
this.pause()
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('.video').each(function() {
$(this).on("mouseover", function(e) { hoverVideo(e); });
$(this).on("mouseout", function(e) { hideVideo(e); });
});
});
function hoverVideo(i) {
i.target.play();
}
function hideVideo(i) {
i.target.pause();
}
</script>
</head>
<body>
<div class="main">
<h3>Title</h3>
<p>
*Hover over each frame to see the story.
</p>
</div>
<div class="main">
<div class="firstrow">
<div class="video" id="one" >
<video class="thevideo" loop>
<source src="https://www.w3schools.com/tags/movie.mp4" type='video/mp4' />
</video>
</div>
<div class="video" id="one" >
<video class="thevideo" loop>
<source src="https://www.w3schools.com/tags/movie.mp4" type='video/mp4' />
</video>
</div>
<div class="video" id="one" >
<img src="Resources/text/tap.svg" />
</div>
</div>
</div>
</body>
At the moment you are only calling the function on 1 video - the video that triggered the event i.target.play();
So you just need to toggle pause and play on all videos inside .firstrow instead:
$(".firstrow .video").on("mouseenter", ()=>{
$(".firstrow video").each((index, video)=>{
video.play();
});
});
$(".firstrow .video").on("mouseleave", ()=>{
$(".firstrow video").each((index, video)=>{
video.pause();
});
});
Hi all first of all thanks for the time to read my question and your help
I'm having the next issue with a customizing video controls in html5
In the next link i insert the video tag directly on the body and custom the video controls with the main.js
http://pechacabeza.com/labs/Webo/video/
<body onload="init()">
<div id="container" onclick="screenad.click();"></div>
<video id='media-video' controls poster="video_poster.jpg" autoplay muted class="adrime_video">
<source src='video.mp4' type='video/mp4'>
<source src='video.webm' type='video/webm'>
</video>
<div id='media-controls'>
<progress id='progress-bar' min='0' max='100' value='0'></progress>
<button id='replay-button' class='replay' title='replay' onclick='replayMedia();'></button>
<button id='play-pause-button' class='play' title='play' onclick='togglePlayPause();'></button>
<button id='mute-button' class='mute' title='mute' onclick='toggleMute("false");'></button>
</div>
</body>
The point is that i want to insert the video within a function initialiseMediaPlayer which is inside the main.js but then the custom video controls doesn't work :S as you can see in the next link:
http://pechacabeza.com/labs/Webo/video_Dynamic/
<body onload="init()">
<div id="container" onclick="screenad.click();"></div>
<div id='media-controls'>
<progress id='progress-bar' min='0' max='100' value='0'></progress>
<button id='replay-button' class='replay' title='replay' onclick='replayMedia();'></button>
<button id='play-pause-button' class='play' title='play' onclick='togglePlayPause();'></button>
<button id='mute-button' class='mute' title='mute' onclick='toggleMute("false");'></button>
</div>
<div id="media-video"></div>
</body>
Any idea what it could be wrong?
Thanks in advance
im trying to implement a show and hide video element button
Here are my two buttons alongside Play/pause/Restart
<div class="rightContent">
<p class="center">Video Control Options</p>
<p class="videoControls"> <input type="button" value=" Play " onclick="video.play()"/> </p>
<p class="videoControls"> <input type="button" value=" Pause " onclick="video.pause();" /> </p>
<p class="videoControls"> <input type="button" value=" Restart " onclick="video.currentTime =0;"/> </p>
<p class="videoControls"> <input type="button" value=" Show Controls " onclick="Show()"/> </p>
<p class="videoControls"> <input type="button" value=" Hide Controls " /> </p>
</div>
My Javascript function to attempt to Hide the controls currently:
function hide(){
videoControls.setAttribute = ('style', 'display:none;')
}
however, this does not work.
Put the video element in a variable such as myVideo.
ex: var myVideo = document.getElementById( 'myVideo' )
Then:
function hide(){
video.removeAttribute( 'controls' );
}
Here is a snippet showing it in action:
<!DOCTYPE html>
<html>
<body>
<video id="myVideo" width="250" controls>
<source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
<br>
<button onclick="hide()">Hide Controls</button>
<button onclick="show()">Show Controls</button>
<script>
var myVideo = document.getElementById( 'myVideo' );
function hide(){
myVideo.removeAttribute( 'controls' );
}
function show(){
myVideo.setAttribute( 'controls', '' );
}
</script>
</body>
</html>
Your code sample is incomplete, but this is what I think is happening: you are trying to call setAttribute on a NodeList, which is not a method of NodeList.
// this is a node list, not a single node!
var videoControls = document.querySelectorAll(".videoControls");
// convert nodelist to array
var vcArray = Array.prototype.slice.call(videoControls);
// iterate over controls and hide each one.
vcArray.forEach(function(control){
control.style.display = "none";
});
I'm just wondering how to change src attribute value using jQuery after clicking a link. I want when user click a link on the webpage, a new video will be played as a transition to another page. Here's what my html and jquery look like right now:
<script type = "text/javascript" src = "jquery-1.10.2.js"></script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("a").click(function() {
//alert("Test");
$("#vid source:nth-child(1)").attr("src","Media/bar-transition.mp4");
$('#vid source:nth-child(2)').attr("src","Media/bar-transition.webm");
$('#vid source:nth-child(3)').attr("src","Media/bar-transition.ogv");
$('#vid')[0].play();
});
});
</script>
<body onload = "setTimeout(showIt,3000)">
<div id="main">
<video id="vid" autoplay />
<source src="Media/test-vid-rev.mp4" type="video/mp4" />
<source src="Media/test-vid-rev.webm" type="video/webm" />
<source src="Media/test-vid-rev.ogv" type="video/ogg" />
Your browser do not support the video type
</video>
<div class="nav-transition">
<ul id="nav">
<li id="graphic"> </li>
<li id="product"> </li>
<li id="digital"> </li>
<li id="view"> </li>
</ul>
</div>
</div>
when I clicked the link("#g","#p",etc), the video source doesn't get changed..is there anything wrong with my jQuery syntax? Can anybody help? I'm a newbie to jQuery..
Thx
-zangetsKid
I think you need to add
$('#vid')[0].load()