Question

这是一个令人难以置信的网站，它在过去帮助了我，但我似乎无法在这里或通过Google找到我的答案。

贝娄是我的测试页面...我显然还在学习很多......当页面加载时，它会播放嵌入式视频，这样做有效。 Bellow它将是四个按钮（正确加载和格式化）...目标是，如果您单击一个按钮，将加载与该按钮关联的视频。

很抱歉，我将使用CSS发布整个HTML文档，以便明确提及所有内容。如果我走在正确的轨道上或者我离开了，请告诉我。

谢谢！

<!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>

Answer 1

您的逻辑似乎没问题，但也许您可以优化控制视频的功能。

我会创建一个主要的javascript函数，并从任何传递视频源参数的按钮调用它。类似的东西：

<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>

然后你的按钮就是：

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

好处是你可以制作任意数量的按钮，逻辑也是一样的。

通过javascript按钮加载嵌入式MP4视频

1 个答案: