CODEWITHSUNDEEP
javascriptcsshtmlbuttonvideo
Chase Westlye
Chase Westlye

Reputation: 383

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>

Upvotes: 1

Views: 1379

Answers (1)

ılǝ
ılǝ

Reputation: 3528

Your logic seems ok, but perhaps you could optimize the functions controlling your video.

I would create one main javascript function and call it from any button passing a parameter for the source of the video. Something like:

<script>
    function changeSource(newVideoSource){
      document.getElementById("Embeded_Video").removeAttribute("src");
      document.getElementById("Embeded_Video").setAttribute("src", newVideoSource+".mp4");
      document.getElementById("Embeded_Video").setAttribute("src", newVideoSource+".ogv");
      document.getElementById("Embeded_Video").load();
      document.getElementById("Embeded_Video").play();
   });
</script>

and then your buttons would be:

<button class="video_select" type="button" onclick="changeSource('Video/sitetest')">Guardians</button>

The upside is you can make as many button as you like and the logic would be the same.

Upvotes: 1

Related Questions