Question

当用户点击“按钮或点击”时，我一直在尝试制作代码;它直接转到另一个视频而不离开网站。我正在开始一个视频漫游网站，似乎无法使这个代码工作。顺便说一句，我没有在我的数据库上托管视频。我甚至试图让它工作虽然iframe，当然还有超链接。任何帮助都会非常惊人，我到处寻找，但我能找到的只是“Youtube Scripts”，我真的会感谢任何建议或帮助。

代码 - ＆gt;＆gt;

http://codepen.io/anon/pen/YXExdj.html

预览什么;我正在努力实现。 http://i57.tinypic.com/2db1408.png

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="https://code.jquery.com/jquery-1.10.2.min.js
jquery-min-1-10-2.js"></script>
<script>
   $ (document).ready(function(){
   $ ("ul#videos li a").click(function(e) {
     e.preventDefault();
   $("vimeo").attr("src", $(this).attr("href"));
   }}
   });
</script>
<style>
   iframe#vimeo {width: 700px; height: 394px;}
</style>
</head>
<body>
   <ul id="video">
      <lil>
      <a id="island" href="VIDEO LINK">Video One</a></li>
      <li><a id="timeLapse" href="VIDEO LINK">Video Two</a></li>
      <li><a id="darkside" href="VIDEO LINK">Video Three</a></li>
   </ul>


<IFRAME ID="vimeo" SRC="http://streamin.to/embed-1sduh0qh36lg.html" FRAMEBORDER=0 MARGINWIDTH=0 MARGINHEIGHT=0 SCROLLING=NO WIDTH=640 HEIGHT=504></IFRAME>

Answer 1

你可以隐藏/显示＆amp;根据点击的按钮播放/暂停HTML5视频标签。

JSFiddle

HTML代码

<ul>
    <li><a id="video1button" href="#">Video One</a></li>
    <li><a id="video2button" href="#">Video Two</a></li>
</ul>

<video controls width="640" height="504" id="video1">
    <source src="http://www.html5rocks.com/en/tutorials/video/basics/devstories.webm" type='video/webm'>
    Your browser does not support the video tag.
</video>

<video controls width="640" height="504" id="video2">
    <source src="http://justinwhitney.com/HTML5Example/HTML5Sample_WebM.webm" type='video/webm'>
    Your browser does not support the video tag.
</video>

JavaScript代码

$("#video1").hide();
$("#video2").hide();

$("#video1button").click(function(){
    $("#video2").hide();
    $("#video2").get(0).pause();
    $("#video1").show();
    $("#video1").get(0).play();
});


$("#video2button").click(function(){
    $("#video1").hide();
    $("#video1").get(0).pause();
    $("#video2").show();
    $("#video2").get(0).play();
});

jQuery Video Taps Script

1 个答案:

HTML代码

JavaScript代码