Question

我不知道下面的html代码中的那些按钮如何在我的js文件中触发iframe（在视频中）（和/或通过播放div）

HTML CODE：

    <div style="text-align:center"> 
  <button onclick="playPause(); return false;">Play/Pause</button> 
  <button onclick="makeBig(); return false;">Enlarge</button>
  <button onclick="makeSmall(); return false;">Shrink</button>
  <button onclick="makeNormal(); return false;">Default</button></div>

<div class="video">
    <div class="play"><i class="icon-play"> ► </i></div>
  <img src="http://i.imgur.com/9EcjYs8.jpg" data-video="http://www.youtube.com/embed/OgAr66JbvtU?autoplay=1"/>
</div>

JS CODE：

$(document).ready(function (){

$('.play').click(function () {
    video = '<iframe width="600" height="375" frameborder="0" src="' + $('img').attr('data-video') + '"></iframe>';
    $('.video').replaceWith(video);
});
});

  var myVideo  = $('video');
function playPause()
{ 
if (myVideo.paused) 
  myVideo.play(); 
else 
  myVideo.pause(); 
} 
function makeBig()
{ 
myVideo.height=487.5;
myVideo.width=780;
} 

function makeSmall()
{ 
myVideo.height=262.5;
myVideo.width=420;
} 

function makeNormal()
{ 
myVideo.height=375;
myVideo.width=600;
}

如果你需要CSS：

body{
  background-image: linear-gradient(#99ccff, #fff6e4);
  margin: 0 auto;
  margin-top:100px;
  width:600px;
  height:375px;
}

html{
  min-height:100%;
}

.video {
    margin: 0 auto;
    position: relative;
    height: 375px;
    width: 600px;
    background: #73AF96;
}
.video img {
    opacity: 0.65;
    transition: 0.4s all;
}

.video div.play:hover + img {
  filter: blur(2px);
  -webkit-filter: blur(2px);
  -moz-filter: blur(2px);
  -o-filter: blur(4px);
  -ms-filter: blur(4px);
}

.play {
  z-index: 1;
}

.play {
    opacity:0.5;
    height: 100px;
    width: 140px;
    position: absolute;
    text-align: center;
    cursor: pointer;
    border-radius: 5px;
    /*Centering*/
    margin: -60px 0 0 -60px;
    left: 50%;
    top: 50%;
    display: block;
    background: #FF9933;
    transition: background-color 1s ease;
    color: white;
}
.play:hover {
    opacity: 0.7;
    background: #FF6600;
}
.icon-play {
    text-align:center;
    line-height: 100px;
    font-size:2.5em;
}

.icon-play:before {
    cursor: pointer;
}

但是，我无法通过js修复按钮，它们似乎无法正常工作。提前感谢您的帮助!!!

Answer 1

我知道这是迟到的回复，但它可以帮助其他人在两行中实现这一目标。

只需点击即可使用您的视频网址将iframe src属性替换为autoplay = 1“//www.youtube.com/embed/QDmJxKHoVBo?autoplay=1”

您的播放按钮或链接代码

<a href="javascript:void(0)" onclick="jQuery('#video-frame').attr('src','//www.youtube.com/embed/S-JtVTTMU2A?autoplay=1');jQuery('.video-container').show();"  >Play</a>

将Iframe源属性设置为空

<div class="video-container" style="display:none">
    <iframe id="video-frame" width="853" height="480" src=""  frameborder="0" allowfullscreen></iframe>
<br>
</div>

让魔法发挥作用。

Answer 2

您应该使用Youtube Javascript API来执行此操作。这是一个javascript完整控件演示：https://developers.google.com/youtube/youtube_player_demo

通过div触发iframe youtube视频

2 个答案: