Develop Reference

JavaScript - Overlay button on video

I'm able to play a video and have it pause after 5 seconds. When it pauses at 5 seconds, I would like for a button to appear in the middle of the screen. When the button is clicked, I would like for the currentTime to be set at 20 seconds, for the button to disappear, and for the video to play at 20 seconds. I'm not sure how to execute this.
This is what I have so far:
.js
var video = document.getElementById("myvid");
video.addEventListener("timeupdate", function(){
if(this.currentTime >= 5) {
this.pause();
//need to call for the button to appear in the video screen. overlay?
//when the button is clicked, call the skip() function
//button needs to disappear
}
});
function skip(){
video.currentTime = 20;
video.play();
}
.html
<div id="wrapper">
<video id="myvid" width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
</video>
//would i put an onclick button here?
</div>
Since it's a button for now, would I even need .css?

You can add a click handler to the button with onclick="function()"
we will set its style to display none as you want it to be hidden to begin with
we'll select in the javascript call it button and when you pause the video we'll set it to be visible.
var video = document.getElementById("myvid");
var button = document.querySelector("button");
var firstRun = true;
video.addEventListener("timeupdate", function(){
if(this.currentTime >= 5 && firstRun) {
this.pause();
firstRun = false;
button.style = "display: block";
}
});
function skip(){
video.currentTime = 20;
video.play();
button.style = "";
}
button {
display: none;
position: absolute;
top: 40px;
}
<div id="wrapper">
<video id="myvid" width="320" height="240" controls>
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4">
</video>
<button onclick="skip()">skip</button>
</div>

HTML: Audio file not updating when reloaded

I have an audio file called sound.wav that is 14 seconds long. When a user clicks a button, sound.wav source url is changed and sound.wav is reloaded and is now 7 seconds long.
However, my browser does not display the changes. Only after clicking the refresh button does it display the changes.
Here is my code:
<div id="audioContainer">
<audio id ="myAudio" controls>
<source id = "wav_src" src="http://localhost:3000/sounds/sound.wav" type="audio/wav">
</audio>
</div>
//user clicks button... sound.wav's url source is changed
document.getElementById("myAudio").load(); //code to reload the sound.wav
As you can see, I'm reloading the html audio element for sound.wav after the user presses a button. However, the sound file remains unchanged on the website, unless I hit refresh.
How do I fix this?

When you change the src of the <source> element, it doesn't change the src of the its parent MediaElement (<audio> or <video>). You have to call this MediaElement's .load() method :
set_src.onclick = function() {
source.src = 'http://cdn.music2ten.com/mp3/pd4u/GershwinWhiteman-RhapsodyInBluePart1.mp3';
console.log('source src:', source.src);
setTimeout(function(){console.log('audio src:', audio.currentSrc)});
}
load_btn.onclick = function() {
audio.load(); // you must call this
setTimeout(function(){console.log('audio src:', audio.currentSrc)});
};
<audio id="audio" controls="controls">
<source id="source">
</audio>
<br>
<button id="set_src">set src</button>
<button id="load_btn">load</button>
Of course you would normally do this in one-go:
set_src.onclick = function() {
source.src = 'http://cdn.music2ten.com/mp3/pd4u/GershwinWhiteman-RhapsodyInBluePart1.mp3';
audio.load(); // you must call this
}
<audio id="audio" controls="controls">
<source id="source">
</audio>
<br>
<button id="set_src">set src</button>

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.

Playing a video in slider and then swapping out for an image at end

So I currently have a video playing inside a HeroCarousel slider. There is an image before the slider and another image after the slider.
My code:
<div data-time="8000" data-prev-src="/media/splash/slider-left.png" data-next-src="/media/splash/slider-right.png">
<a href="/island-careers/retail.html">
<img src="/media/island/splash/now-hiring-splash.jpg" />
</a>
</div>
<div data-time="9000" data-video="true" data-prev-src="/media/splash/slider-left-black.png" data-next-src="/media/splash/slider-right-black.png" id="video">
<a href="/catalog/island-collections/packing-list/">
<video width="1275" height="557" preload="auto" id="myVideo">
<source src="/media/island/splash/video-2.mp4" type="video/mp4">
</video>
<img src="/media/island/splash/escape-splash.jpg" />
</a>
</div>
<div data-time="8000" data-prev-src="/media/splash/slider-left.png" data-next-src="/media/splash/slider-right.png">
<a href="/catalog/mens-resort-wear/classic-shirts/breaker-striped-red-linen-shirt.html">
<img src="/media/island/splash/breakers-shirt-splash.jpg" />
</a>
</div>
So my issue is that the video is playing when the page loads. When the slide enters into view, the video is already at its completed frame. I want the video to play when the slide enters into view and not when the page loads. The slider adds the class current to the current slide so I started writing the following script in order to get it to play:
//playing video
jQuery(document).ready(function() {
$play = 0;
if($play > 0) {
if(jQuery("article#video").hasClass("current")) {
jQuery("#myVideo").get(0).play();
$play++;
}
}
});
This script is not working completely.
I would also like to swap out the video for the image found underneath it once the video ends (the video should only be played once)

One way to achieve this would be using flags and listening to DOMSubtreeModified and ended event.
for starting the video only when the slide is visible, you can do
var canPlay = false, played = false;
$('.hero-carousel article').bind('DOMSubtreeModified', function(e) {
if(played){ // flag to make sure it is played only once.
$('.hero-carousel article').unbind('DOMSubtreeModified');
}else if($(e.target).hasClass('current')){
canPlay = true; // flag to make sure, playing starts only when slide is current.
var video = $(e.target).find('video')[0];
if(video){
video.play();
}
}
});
$('.hero-carousel article video').bind('play', function(){
if(!canPlay){
this.pause();
this.currentTime = 0;
}else{
played = true;
}
});
and for hiding the video once it is finished, you can do:
$('.hero-carousel article video').bind('ended', function(){
this.style.display = 'none';
});
fiddle demo

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;