HTML5 video player gallery with ogg fallback - javascript

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.

Related

How to Play GIF on click audio play button

I want that whenever anyone plays the audio then only gif play..
here what I tried...
number = 0;
var animations = ['https://static.wixstatic.com/media/6b2a99_687dc4cb09bc42bdb230d1c8ce7815a4~mv2.gif',
'https://static.wixstatic.com/media/6b2a99_687dc4cb09bc42bdb230d1c8ce7815a4~mv2.gif',
'https://static.wixstatic.com/media/6b2a99_687dc4cb09bc42bdb230d1c8ce7815a4~mv2.gif'
];
function character() {
image = document.getElementById('1BoXzCv8EbZ5BDnb47T31lPM1lKdne7wG');
image.src = animations[number];
}
<div class="board">
<img src="https://blogger.googleusercontent.com/img/a/AVvXsEhUIEQv7m_0HrLkcEDQURyV74eGEO8ZDW0LhhyFbK72BBXm9S0BolRB0V82i7RvX5S83j1QPOYazQlbUp8p9S5xSnlMNIpQGwJdKlmwCiPc8sHMqO8dPgYpstyejRK9rKeWNlofjOhTQGcfyk3Jt_1YqAezHYyRBDJiaGYD1R5O9mrdzaQKzDAc0Pe2oA=s16000" alt="cassete" width="300" height="200" id="1BoXzCv8EbZ5BDnb47T31lPM1lKdne7wG" onclick="character();"/>
<audio class="splplayer" controls="controls" id="audio_player" preload="metadata">
<source src="https://drive.google.com/uc?export=download&id=1BoXzCv8EbZ5BDnb47T31lPM1lKdne7wG"></source></audio></div>
Don't know where the error occurs.... here gif is playing on clicking on it not on clicking the audio play button

Java Script Auto Next Page after video ends

How Do I make the event Click a button instead of inputting a URL... because the URL is never the same but the words Next Episode will always be there..
// Do not name the function "play()"
function playVideo(){
var video = document.getElementById('video');
video.play();
video.addEventListener('ended',function(){
window.location = 'http://www.google.com';
});
}
</script>
<video controls id="video" width="770" height="882" onclick="playVideo()">
<source src="video/Motion.mp4" type="video/mp4" />
</video>
Give your link an id:
<a id="some-id" href="LINK" title="episode name"><span>next episode</span> <i class="icon-chevron-right"></i></a>
Then change your event listener to this:
video.addEventListener('ended',function(){
document.getElementById('some-id').click();
});

Show video buffering on progressbar html video element

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>

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;

Play and pause one HTML5 audio element at a time via jQuery

I've got several HTML5 audio elements on a page and am using jQuery to play and pause them. The play and pause functions work appropriately, but the tracks can all be played at the same time.
How can I rewrite this code so that only one song can be played at a time? That is.. if one is playing and you click on another, pause the previous and play the most recent click.
Thank you!
HTML:
<div id="music_right">
<div class="thumbnail" id="paparazzi">
<a class="playback">
<img class="play" src="http://www.lucisz.com/imgs/play.png" />
</a>
<audio>
<source src="../audio/fernando_garibay_paparazzisnlmix.ogg" type="audio/ogg" />
<source src="../audio/fernando_garibay_paparazzisnlmix.mp3" type="audio/mpeg" />
Your browser does not support HTML5 audio.
</audio>
</div>
<div class="thumbnail" id="danceinthedark">
<a class="playback">
<img class="play" src="http://www.lucisz.com/imgs/play.png" />
</a>
<audio>
<source src="../audio/fernando_garibay_danceinthedark.ogg" type="audio/ogg" />
<source src="../audio/fernando_garibay_danceinthedark.mp3" type="audio/mpeg" />
Your browser does not support HTML5 audio.
</audio>
</div>
<div class="thumbnail" id="bornthisway">
<a class="playback">
<img class="play" src="http://www.lucisz.com/imgs/play.png" />
</a>
<audio>
<source src="../audio/fernando_garibay_bornthisway.ogg" type="audio/ogg" />
<source src="../audio/fernando_garibay_bornthisway.mp3" type="audio/mpeg" />
Your browser does not support HTML5 audio.
</audio>
</div>
</div>
JavaScript: (that works, but plays/pauses individually)
$(function() {
$(".playback").click(function(e) {
e.preventDefault();
var song = $(this).next('audio').get(0);
if (song.paused)
song.play();
else
song.pause();
});
});
JavaScript: (ugly concept of mine)
$(function() {
$(".playback").click(function(e) {
e.preventDefault();
var song = $(this).next('audio').get(0);
if (song.paused)
song.play();
song.not($(this).pause();
else
song.pause();
});
});
var curPlaying;
$(function() {
$(".playback").click(function(e) {
e.preventDefault();
var song = $(this).next('audio')[0];
if(curPlaying) { $("audio", "#"+curPlaying)[0].pause(); }
if(song.paused) { song.play(); } else { song.pause(); }
curPlaying = $(this).parent()[0].id;
});
});
That should work.
EDIT:
var curPlaying;
$(function() {
$(".playback").click(function(e) {
e.preventDefault();
var song = $(this).next('audio')[0];
if(song.paused){
song.play();
if(curPlaying) $("audio", "#"+curPlaying)[0].pause();
} else { song.pause(); }
curPlaying = $(this).parent()[0].id;
});
});
This little function works for me. It stops all other audio elements playing on the page and lets the one that has been started keep playing. Here is a fiddle.
$("audio").on("play", function (me) {
jQuery('audio').each(function (i,e) {
if (e != me.currentTarget)
{
this.pause();
}
});
});

Categories

Resources