Question

当iframe代码处于焦点时，我正在尝试播放用于自动播放的YouTube视频。试过以下但是没有用。我的jquery出错了吗？我希望在焦点聚焦时将＆amp; autoplay = 1添加到iframe的src。

Html： -

<div class="vid-wrapper" >
    <iframe width="100%" height="100%" id="video1" src="https://www.youtube.com/embed/bxgorUGjCIw?rel=0" frameborder="0" allowfullscreen scrolling="auto" ></iframe>
</div>

Css： -

.vid-wrapper{
width: 100%;
position: relative;
padding-bottom: 56.25%;
height: 0;
z-index:-20;
}
.vid-wrapper video, .vid-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index:-1;
}

Jquery： -

$(document).ready(function() {
 $("#video1").mouseenter(function(){

  $(this).attr("src",$(this).attr("src") + "&amp;autoplay=1");
 });

$("#video1").mouseleave(function(){
  var src= $(this).attr("src");
  var arr_str = src.split("&amp;");
  $(this).attr("src",arr_str[0]);
  });
});

有任何帮助吗？提前谢谢。

Answer 1

实际上，您并非真的想要更改src属性，而是要使用youtube's api：

由于跨源问题（特别是在stackoverflow中），代码段将不，但代码可以正常工作。

＆＃13;

var player;
function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    height: '390',
    width: '640',
    videoId: 'M4Xrh8OP1Jk'
  });
}

$(document).on('mouseover', '#player', function() {
  player.playVideo();
});
$(document).on('mouseout', '#player', function() {
  player.pauseVideo();
});

＆＃13;

<script src="//www.youtube.com/player_api"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="player"></div>

＆＃13;

这是一个有效的jsfiddle：
https://jsfiddle.net/rurc8rb9/

在悬停/鼠标悬停时自动播放YouTube视频

1 个答案: