1

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

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

抱歉，我将使用 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>
4

1 回答 1

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>

好处是您可以制作任意数量的按钮，并且逻辑是相同的。

于 2013-08-28T06:29:45.410 回答