click_load_different_media_01

by Nic Fontaine

HTML

<div id="vid-btn-01" class="vid-btns" onclick="loadVid01();" value="Load Video 1" autoplay="" loop="">
</div><div id="vid-btn-02" class="vid-btns" onclick="loadVid02();" value="Load Video 2" autoplay="" loop="">
</div>
<div class="vid-container">
<video id="vid" width="400">
  <source type="video/mp4">
</video>
</div>

CSS

html, body {
  margin: 0;
}

video {
  display: block;
  margin-top: -5px;
}

#vid-btn-01 {
  border-right: 2px solid #ccc;
  box-sizing: border-box;
}

.vid-btns {
  width: 200px;
  height: 70px;
  background: #ddd;
  display: inline-block;
  margin-bottom: 0;
}

.vid-container {
  width: 400px;
  height: 300px;
}

JavaScript

/*var img01 = new Image();
img01.src = 'https://media.giphy.com/media/iplVhhvRy4r3W/giphy.mp4';

var img02 = new Image();
img02.src = 'https://media.giphy.com/media/3o7Zex09d6tpzl65H2/giphy.mp4';*/


var videoEl = document.getElementById('vid');
var vidContainerDom = document.getElementsByClassName('vid-container')[0];

function loadVid01() {
	vidContainerDom.style.background = "url('https://i.giphy.com/iplVhhvRy4r3W.gif')";
	var sourceEl = videoEl.getElementsByTagName('source')[0];
	sourceEl.src = 'https://media.giphy.com/media/iplVhhvRy4r3W/giphy.mp4';
	videoEl.load();
}

function loadVid02() {
	vidContainerDom.style.background = "url('https://i.giphy.com/3o7Zex09d6tpzl65H2.gif')";
	var sourceEl = videoEl.getElementsByTagName('source')[0];
	sourceEl.src = 'https://media.giphy.com/media/3o7Zex09d6tpzl65H2/giphy.mp4';
	videoEl.load();
}