我不知道下面 html 代码中的那些按钮如何触发我的 js 文件(和/或通过播放 div)中的 iframe(视频内)
HTML 代码:
<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代码:
$(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 修复按钮,它们似乎不起作用。提前感谢您的帮助!!!