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

这是一个令人难以置信的网站，这是帮助我在过去，但我似乎无法在这里或通过谷歌找到我的答案。通过javascript按钮加载嵌入的MP4视频

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

对不起，但我打算用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>

来源

2013-08-28 Chase Westlye

我认为CSS与这个问题无关，你可以删除它，它会更容易到达这一点。 –

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

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

回答

相关问题