Show video buffering on progressbar html video element - javascript

I am trying to get the video to show how much has loaded with the code below but its not working at least not how I expect it to sometimes it shows the progress loaded but the majority of the time it does not. I have checked the console but no errors occur.
Does anybody know what I am doing wrong or if there is a better way for me to do this?
var video = document.getElementById("video");
video.addEventListener('progress', function() {
console.log(video.buffered.length);
if(video.buffered.length > 0){
var loadedPercentage = this.buffered.end(0) / this.duration;
}
});
<div id="video_container">
<video id="video" controls width="80%" >
<source src="<? echo $src; ?>">
<track label="English" kind="subtitles" srclang="en" src="<? echo $subLink; ?>" default>
</video>
</div>

Related

change video source before play using jquery

I'd like to be able to change the video source before it starts to play based on a media query using javascript/jquery. The premise being, if the screen resolution is below a certain value then the device is mobile and lets assume it is on a mobile network so load the lower resolution video.
The following works, but I get a 'glitch' as the original video loads before jQuery does it's thing and changes the video source.
I've looked into using the media query built into the html5 video tag but understand that it has limited support.
<style>
#mobile-indicator {
display: none;
}
#media (max-width: 767px) {
#mobile-indicator {
display: block;
}
}
</style>
the html is as follows
<script type="text/javascript">
(function($){
$(window).on("load",function(e){
$('video source').each(function(){
var isMobile = $('#mobile-indicator').is(':visible');
if (isMobile == true){
var videoSrc = ($(this).attr('src'));
var videoSmall = $(this).attr('src').replace('.mp4', '_small.mp4');
$(this).attr('src', videoSmall);
$("video")[0].load();
//console.log(newExt);
}
});
});
})(jQuery);
</script>
<div class="bg_video">
<video class="video" poster="<?PHP echo $bg_image; ?>" id="bg_video" playsinline autoplay muted loop >
<source src="https://www.html5rocks.com/en/tutorials/video/basics/devstories.mp4" type="video/mp4">
</video>
</div>
<div id="mobile-indicator"></div>
Any ideas how I can do the media query before the video starts to play?
Cheers,
Philip
I've created a codepen that demonstrates the problem
[UPDATE based on VC.One's solution]
<script type="text/javascript">
(function($){
$(window).on("load",function(e){
$('video source').each(function(){
var isMobile = $('#mobile-indicator').is(':visible');
var videoSrc = 'images/backgrounds/<?PHP echo $bg_video; ?>';
if (isMobile == true){
var videoSmall = videoSrc.replace('.mp4', '_small.mp4');
$(this).attr('src', videoSmall);
}else{
$(this).attr('src', videoSrc);
}
$("video")[0].load();
});
});
})(jQuery);
</script>
<div class="bg_video">
<video class="video" <?PHP echo ($bg_image !="") ? 'poster="' . $bg_image . '"' : ''; ?>" id="bg_video" playsinline autoplay muted loop >
<source src="images/backgrounds/null.mp4" type="video/mp4">
</video>
</div>
It seems a simple If/Else statement works. Let me know how it goes.
(1) HTML : Use a dummy URL like null.mp4 so nothing is loaded by video tag at start.
<div class="bg_video">
<video class="video" poster="<?PHP echo $bg_image; ?>" id="bg_video" playsinline autoplay muted loop >
<source src="null.mp4" type="video/mp4">
</video>
</div>
(2) JS : Use an If/Else statement in your JavaScript code.
(function($)
{
$(window).on("load",function(e)
{
$('video source').each(function()
{
var isMobile = $('#mobile-indicator').is(':visible');
if (isMobile == true)
{
alert("is mobile");
var videoSmall = "https://www.w3schools.com/html/mov_bbb.mp4";
$(this).attr('src', videoSmall);
}
else
{
alert("not mobile");
var videoLarge = "https://www.html5rocks.com/en/tutorials/video/basics/devstories.mp4";
$(this).attr('src', videoLarge);
}
$("video")[0].load();
});
});
})(jQuery);

Javascript 'x is not a function'

I'm trying to start and stop two videos with two separate buttons. I've simply copied the code and renamed the variables, yet one piece of code works and one doesn't. I get the error 'TypeError: video2.pause is not a function at HTMLButtonElement.c'. Both videos and buttons are placed in modals respectively. Why am I getting this weird error, especially when exactly the same code works?
Javascript:
var video = document.getElementById("video.mp4");
var playButton = document.getElementById("play-pause");
var video2 = document.getElementById("video2.mp4");
var play = document.getElementById("play-pause2");
playButton.addEventListener("click", function a () {
if (video.paused == true) {
video.play();
playButton.innerHTML = "Pause";
} else {
video.pause();
playButton.innerHTML = "Play";
}
});
play.addEventListener("click", function c () {
if (video2.paused == true) {
video2.play();
play.innerHTML = "Pause";
} else {
video2.pause();
play.innerHTML = "Play";
}
});
HTML:
<video width="900px" height="600px" id="Digital_Poster.mp4" />
<source src="assets/video.mp4" type="video/mp4" id="video.mp4"/>
Sorry, this browser does not support the 'video' tag.
</video>
<div id="video-controls">
<button type="button" id="play-pause">Play</button>
</div>
<video width="900px" height="600px">
<source src="assets/video2.mp4" type="video/mp4" id="video2.mp4"/>
Sorry, this browser does not support the 'video' tag.
</video>
<div id="video-controls">
<button type="button" id="play-pause2">Play</button>
</div>
You should call .pause on the <video> elements, but the id is set on the <source> ones. Moving it to the <video> tags should make it work:
<video width="900px" height="600px" id="video.mp4">
<source src="assets/video.mp4" type="video/mp4" />
Sorry, this browser does not support the 'video' tag.
</video>
<div id="video-controls">
<button type="button" id="play-pause">Play</button>
</div>
<video width="900px" height="600px" id="video2.mp4">
<source src="assets/video2.mp4" type="video/mp4" />
Sorry, this browser does not support the 'video' tag.
</video>
<div id="video-controls">
<button type="button" id="play-pause2">Play</button>
</div>
By the way, I've corrected the /> to > in the first line. Also, declaring two elements with ID set to video-controls is illegal, consider using HTML classes (thanks #zer00ne for pointing out).

jQuery video overlay button

I have made attempts to create an overlay play button for my HTML 5 video. I have created an example on Jfiddle - click here-This works fine. I have tried to integrate my fiddle onto my site however i am receiving the error message Cannot read property 'paused' of undefined. Believe this has something to do with the structure of my code. Below is a snippet of how my code is set up.
$('.video').click(function () {
if($(this).children(".video").get(0).paused){
$(this).children(".video").get(0).play();
$(this).children(".playpause").fadeOut();
}else{
$(this).children(".video").get(0).pause();
$(this).children(".playpause").fadeIn();
}
});
HTML
<div class="col-md-12 video">
<video muted loop controls poster="/assets/casestudies/marketingandcomms/ukcoffeeweek/coffee-video-poster.gif">
<source src="/assets/videos/coffee-video.mp4" type="video/mp4">
</video>
<div class="playpause"></div>
Can anyone point me in the right direction ?
you use two different html structures with wrong JQuery Selectors.
try the Following html and Jquery Codes:
DEMO: https://jsfiddle.net/9ewogtwL/150/
<div class="wrapper">
<video class="video">
<source src="http://e14aaeb709f7cde1ae68-a1d0a134a31b545b257b15f8a8ba5726.r70.cf3.rackcdn.com/projects/31432/1427815464209-bf74131a7528d0ea5ce8c0710f530bb5/1280x720.mp4" type="video/mp4" />
</video>
<div class="playpause"></div>
</div>
with this JQuery Code:
$('.wrapper').click(function () {
var videoEl = $(this).find("video").get(0);
if( videoEl.paused ){
videoEl.play();
$(this).find(".playpause").fadeOut();
}else{
videoEl.pause();
$(this).find(".playpause").fadeIn();
}
});
DEMO URL: JSBIN-DEMO
JQUERY
$('.video').on('click',function () {
$player=$(this).find("video")[0];
if($player.paused){
$player.play();
$(this).find('.playpause').fadeOut();
}
else{
$player.pause();
$(this).find('.playpause').fadeIn();
}
});
HTML
<div class="col-md-12 video">
<video muted loop controls poster="">
<source src="http://www.w3schools.com/tags/movie.mp4" type="video/mp4">
</video>
<div class="playpause">PLAY</div>
<div>

HTML5 video player gallery with ogg fallback

I have created a simple video gallery on my page which consists of 4 videos as thumbnails and 1 player which played the clicked thumbnail.
I have wrote some javascript which allows the user to click a thumbnail which triggers a function. The function then loads the new video SRC into the <video> player. Now this works fine in Chrome, but not in Firefox as its in a mp4 format. I thought a simple change of the mp4 to ogg type would make this work for both. But it doesn't.
How to get the following JS working so that all browsers have ogg and mp4 support.
Heres what I have created:
var player = document.getElementById('videoPlayer');
var mp4Vid = document.getElementById('mp4Source');
var oggVid = document.getElementById('oggSource');
function germanicosLoadVid() {
player.pause();
player.pause();
mp4Vid.setAttribute('src', "http://www.sample-videos.com/video/mp4/240/big_buck_bunny_240p_1mb.mp4");
oggVid.setAttribute('src', "http://techslides.com/demos/sample-videos/small.ogv");
player.load();
player.play();
}
function platinumLoadVid() {
player.pause();
mp4Vid.setAttribute('src', "http://www.sample-videos.com/video/mp4/240/big_buck_bunny_240p_1mb.mp4");
oggVid.setAttribute('src', "http://techslides.com/demos/sample-videos/small.ogv");
player.load();
player.play();
}
function houseLoadVid() {
player.pause();
mp4Vid.setAttribute('src', "http://www.sample-videos.com/video/mp4/240/big_buck_bunny_240p_1mb.mp4");
oggVid.setAttribute('src', "http://techslides.com/demos/sample-videos/small.ogv");
player.load();
player.play();
}
<video controls class="vid-center" id="videoPlayer" style="max-width:800px;">
<source src="<?php the_field('video_file_1'); ?>" type="video/mp4" id="mp4Source">
<source id="oggSource" src="http://techslides.com/demos/sample-videos/small.o" type="video/ogg"/>
Your browser does not support the video tag.
</video>
<img src="http://getuikit.com/docs/images/placeholder_600x400.svg" alt="" onclick="houseLoadVid()" />
<img src="http://getuikit.com/docs/images/placeholder_600x400.svg" alt="" onclick="platinumLoadVid()" />
<img src="http://getuikit.com/docs/images/placeholder_600x400.svg" alt="" onclick="germanicosLoadVid()" />
Theres a JSFiddle here, too.

How to stop HTML5 video?

I have a video in popup. When use below code on popup close, the video doesn't stop buffering and have the old video reference when reopen it. Here is the code:
HTML:
<div id="w_oPopup">
<div id="w_oPlayer">
<video id="w_oVideoFrame" autoplay loop controls tabindex="0" width="946" height="532" poster="">
<source src="video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
</video>
</div>
</div>
JS:
$('.w_cExitPopupButton').bind('click', onPopupBlockerClick);
function onPopupBlockerClick(e) {
$('#w_oPopupBlocker').hide();
//Here my tries...
$('#w_oVideoFrame')[0].pause();
$('#w_oVideoFrame')[0].src = "";
}
Try using the pause() method to stop the audio and set the audio path again and play. There is no stop() method to stop the video.
function stop_audio(){
$('#w_oVideoFrame')[0].pause();
$('#w_oVideoFrame')[0].src = " ";
}
function play_audio(){
$('#w_oVideoFrame')[0].src = "path of audio";
$('#w_oVideoFrame')[0].play();
}
use the currentTime on the selected video element
video.currentTime = 0;

Categories

Resources