Loading embedded MP4 video by button via javascript
this is an incredible site that's helped me in the past but I couldn't
seem to find my answer either on here or via Google.
Bellow is my test page... I'm obviously still learning a lot... It'll have
an embedded video playing when the page loads which does work. Bellow it
will be four buttons (that do load and format correctly)... The goal is
that if you click a button, the video associated with that button would
load.
Sorry but I'm going to post the entire HTML doc with CSS just so there's a
clear reference to everything. Please let me know if I'm on the right
track or if I'm way off.
Thank you!
<!DOCTYPE HTML>
<html>
<head>
<title>My Page</title>
<style type="text/css">
.video_select {
opacity:0.4;
-moz-box-shadow:inset 0px 0px 0px -50px #fff6af;
-webkit-box-shadow:inset 0px 0px 0px -50px #fff6af;
box-shadow:inset 0px 0px 0px -50px #fff6af;
background:-webkit-gradient( linear, left top, left
bottom, color-stop(0.05, #ffec64), color-stop(1, #ffab23)
);
background:-moz-linear-gradient( center top, #ffec64 5%,
#ffab23 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffec64',
endColorstr='#ffab23');
background-color:#ffec64;
-webkit-border-top-left-radius:11px;
-moz-border-radius-topleft:11px;
border-top-left-radius:11px;
-webkit-border-top-right-radius:11px;
-moz-border-radius-topright:11px;
border-top-right-radius:11px;
-webkit-border-bottom-right-radius:0px;
-moz-border-radius-bottomright:0px;
border-bottom-right-radius:0px;
-webkit-border-bottom-left-radius:0px;
-moz-border-radius-bottomleft:0px;
border-bottom-left-radius:0px;
text-indent:0px;
border:1px solid #ffaa22;
display:inline-block;
color:#333333;
font-family:Arial;
font-size:15px;
font-weight:bold;
font-style:normal;
height:32px;
line-height:32px;
width:91px;
text-decoration:none;
text-align:center;
text-shadow:1px 0px 0px #ffee66;
}
.video_select:hover {
background:-webkit-gradient( linear, left top, left
bottom, color-stop(0.05, #ffab23), color-stop(1, #ffec64)
);
background:-moz-linear-gradient( center top, #ffab23 5%,
#ffec64 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffab23',
endColorstr='#ffec64');
background-color:#ffab23;
}
.video_select:active {
position:relative;
top:1px;
}
</style>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js">
</script>
<script>
$("#PlayVideoOne").click(function(){
video_source_link=$(this).attr("src");
document.getElementById("Embeded_Video").RemoveAttribute("src");
document.getElementById("Embeded_Video").setAttribute("src",
Video/VidOne.mp4);
document.getElementById("Embeded_Video").setAttribute("src",
Video/VidOne.ogv);
document.getElementById("Embeded_Video").load();
document.getElementById("Embeded_Video").play();
return false;
});
</script>
</head>
<body>
<video class="center" autoplay loop width='50%'>
<source id="Embeded_Video" src="Video/sitetest.mp4">
<source id="Embeded_Video" src="Video/sitetest.ogv">
</video>
<div>
<button class="video_select" type="button"
onclick="PlayVideoOne()">Guardians</button>
<button class="video_select" type="button"
onclick="PlayVideoTwo()">Northstar</button>
<button class="video_select" type="button"
onclick="PlayVideoThree()">Downieville</button>
<button class="video_select" type="button"
onclick="PlayVideoFour()">North Rim</button>
</div>
</body>
</html>
No comments:
Post a Comment