javascript - 停止YouTube视频的代码？

标签 javascript html css youtube

我在页面上有一些 youtube 视频，并使用 CSS 显示所选视频并循环到其他视频，基本上使用隐藏和 block 元素来隐藏和显示每个视频。我试图避免使用 jQuery，因为我没有找到合适的源代码，也没有编辑现有源代码以满足我的需要的经验。问题是因为我正在隐藏和显示视频，如果我播放一个视频并移动到下一个 - 原始视频仍在播放，因此您会出现音频交叉，并且许多视频会降低 PC 的速度。 Youtube 视频可以用“k”键暂停，所以我在链接中添加了一个“accesskey”功能来暂停它。但是我猜浏览器在 accesskey 被激活之前隐藏了它，因此视频继续在后台播放，因为 accesskey 只适用于事件视频播放。解决我的问题的任何建议或意见。

网站(实例): http://s187242710.onlinehome.us/tdsa/resources.php

HTML:

<script>
function show(id) {
    var item = document.getElementById(id);
    var all  = document.getElementsByClassName('hidden');
    for(var i=0; i<all.length; i++)all[i].style.display = 'none';
    if(item)item.style.display = 'block';
}
</script>

<h1>Practice Techniques</h1>              

<div class="resourcecontainer">
    <a href="javascript:show('test2');">
    <img class="resourceimage" src="images/sampleresource.jpg" width="190" height="120" border="0">
    </a>
</div>
<div class="resourcecontainer">
    <a href="javascript:show('test3');">
    <img class="resourceimage" src="images/sampleresource.jpg" width="190" height="120" border="0">
    </a>
</div>
<div class="resourcecontainer">
    <a href="javascript:show('test4');">
    <img class="resourceimage" src="images/sampleresource.jpg" width="190" height="120" border="0">
    </a>
</div>
<div class="resourcecontainer">
    <a href="javascript:show('test5');">
    <img class="resourceimage" src="images/sampleresource.jpg" width="190" height="120" border="0">
    </a>
</div>

<br><br>

<h1>Equipment Selection</h1>              

<div class="resourcecontainer"><img class="resourceimage" src="images/sampleresource.jpg" width="190" height="120" border="0"></div>
<div class="resourcecontainer"><img class="resourceimage" src="images/sampleresource.jpg" width="190" height="120" border="0"></div>
<div class="resourcecontainer"><img class="resourceimage" src="images/sampleresource.jpg" width="190" height="120" border="0"></div>
<div class="resourcecontainer"><img class="resourceimage" src="images/sampleresource.jpg" width="190" height="120" border="0"></div>

<br><br>

<div id="test1" class="hidden">

</div>
<div id="test2" class="hidden">
    <div class="resourcevideo">
        <div class="videolink"><a href="javascript:show('test1');">(Previous)</a></div>
        <div class="videolink"><a href="javascript:show('test1');" accesskey="k">[Close]</a></div>
        <div class="videolink"><a href="javascript:show('test3');">(Next)</a></div>
        <iframe class="centervideo" width="550" height="350" src="https://www.youtube.com/embed/EO4-B_ttHe0" frameborder="0" allowfullscreen></iframe>
    </div>
</div>
<div id="test3" class="hidden">
    <div class="resourcevideo">
        <div class="videolink"><a href="javascript:show('test2');">(Previous)</a></div>
        <div class="videolink"><a href="javascript:show('test1');" accesskey="k">[Close]</a></div>
        <div class="videolink"><a href="javascript:show('test4');">(Next)</a></div>
        <iframe class="centervideo" width="550" height="350" src="https://www.youtube.com/embed/XiGt0X0csoE" frameborder="0" allowfullscreen></iframe>
    </div>
</div>
<div id="test4" class="hidden">
    <div class="resourcevideo">
        <div class="videolink"><a href="javascript:show('test3');">(Previous)</a></div>
        <div class="videolink"><a href="javascript:show('test1');">[Close]</a></div>
        <div class="videolink"><a href="javascript:show('test5');">(Next)</a></div>
        <iframe class="centervideo" width="550" height="350" src="https://www.youtube.com/embed/XnbPGKB34bU" frameborder="0" allowfullscreen></iframe>
    </div>
</div>
<div id="test5" class="hidden">
    <div class="resourcevideo">
        <div class="videolink"><a href="javascript:show('test4');">(Previous)</a></div>
        <div class="videolink"><a href="javascript:show('test1');">[Close]</a></div>
        <div class="videolink"><a href="javascript:show('test2');">(Next)</a></div>
        <iframe class="centervideo" width="550" height="350" src="https://www.youtube.com/embed/qiZOkhJ_wnY" frameborder="0" allowfullscreen></iframe>
    </div>
</div>

CSS:

.resourcecontainer {
    width:210px;
    height:140px;
    float:left;
    background-color:#EDEDED;
    margin-right: 20px;
    text-align:center;
    margin-bottom:25px;
    border-radius: 10px;
}

.resourceimage {
    border:solid 1px;
    border-color:#A5A5A5;
    margin-top: 10px;

}

.resourcevideo {
    clear: both;
    width: 600px;
    height: 450px;
    color:#FFFFFF;
    background-color: #000000;
    z-index: 9999;
    position:absolute;
    top: 50%;
    left: 50%;
    margin-left: -300px;
    margin-top: -210px;
}

.centervideo {
    margin: 25px;
}

.videolink {
    color: #FFFFFF;
    padding: 0px;
    margin: 0px;
    font-size:24px;
    font-weight:bold;
    background-color:#AA3537;
    width: 200px;
    height: 50px;
    float: left;
    text-align:center;
    line-height: 50px;
    display: block;
}

.videolink a {
    text-decoration:none;
    color:#FFFFFF;
}

.videolink a:hover {
    color:#000000;
}

.hidden { 
    display:none; 
}

#test1 { 
    display: block; 
}

最佳答案

您需要使用 Youtube Player API及其功能，而不是显示和隐藏视频，而是在单个 div 元素中一次动态加载一个 youtube 视频。这样您的下一个/上一个视频只会在当前视频停止播放后开始播放。

你的 show() 函数应该是这样的-

function show(id,current_video,next_video,previous_video) {
    var item = document.getElementById(id);
    var all  = document.getElementsByClassName('hidden');
    for(var i=0; i<all.length; i++)all[i].style.display = 'none';
    if(item)item.style.display = 'block';

    $("#prev").attr('href','javascript:show("test2","'+next_video+'","'+previous_video+'","'+current_video+'")');
    $("#next").attr('href','javascript:show("test2","'+previous_video+'","'+current_video+'","'+next_video+'")');

    $("#player").attr('src',"https://www.youtube.com/embed/"+current_video+'?enablejsapi=1&origin=http://localhost');
    $("#player")[0].src += "&autoplay=0";

}

此显示功能现在将动态更改您的下一个/上一个和当前视频。

Youtube Player API 应该这样使用

// 2. This code loads the IFrame Player API code asynchronously.
//document.getElementById("video").hide();
var tag = document.createElement('script');

tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> (and YouTube player)
//    after the API code downloads.
var player;

//setInterval(checkTime,1000);

function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
  height: '350',
  width: '550',
  videoId: 'EO4-B_ttHe0',
  events: {
    'onReady': onPlayerReady,
    'onStateChange': onPlayerStateChange
  }
});
}
//setInterval(checkTime,1000);
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
//event.target.playVideo();
}
// 5. The API calls this function when the player's state changes.
//    The function indicates that when playing a video (state=1),
//    the player should play for six seconds and then stop.
var done = false;
function onPlayerStateChange(event) {
/*if (event.data == YT.PlayerState.CUED) {
    player.seekTo(0);
    stopVideo();

}*/
if (event.data == YT.PlayerState.ENDED) {

  done = true;
}
}
function stopVideo() {
player.stopVideo();
}

你的 HTML 应该是这样的

<h1>Practice Techniques</h1>              

<div class="resourcecontainer">
    <a href="javascript:show('test2','EO4-B_ttHe0','XiGt0X0csoE','qiZOkhJ_wnY');">
    <img class="resourceimage" src="http://s187242710.onlinehome.us/tdsa/images/sampleresource.jpg" width="190" height="120" border="0">
    </a>
</div>
<div class="resourcecontainer">
   <a href="javascript:show('test2','XiGt0X0csoE','XnbPGKB34bU','EO4-B_ttHe0');">
    <img class="resourceimage" src="http://s187242710.onlinehome.us/tdsa/images/sampleresource.jpg" width="190" height="120" border="0">
    </a>
</div>
<div class="resourcecontainer">
    <a href="javascript:show('test2','XnbPGKB34bU','qiZOkhJ_wnY','XiGt0X0csoE');">
    <img class="resourceimage" src="http://s187242710.onlinehome.us/tdsa/images/sampleresource.jpg" width="190" height="120" border="0">
    </a>
</div>
<div class="resourcecontainer">
   <a href="javascript:show('test2','qiZOkhJ_wnY','EO4-B_ttHe0','XnbPGKB34bU');">
    <img class="resourceimage" src="http://s187242710.onlinehome.us/tdsa/images/sampleresource.jpg" width="190" height="120" border="0">
    </a>
</div>

<br><br>

<h1>Equipment Selection</h1>              

<div class="resourcecontainer"><img class="resourceimage" src="http://s187242710.onlinehome.us/tdsa/images/sampleresource.jpg" width="190" height="120" border="0"></div>
<div class="resourcecontainer"><img class="resourceimage" src="http://s187242710.onlinehome.us/tdsa/images/sampleresource.jpg" width="190" height="120" border="0"></div>
<div class="resourcecontainer"><img class="resourceimage" src="http://s187242710.onlinehome.us/tdsa/images/sampleresource.jpg" width="190" height="120" border="0"></div>
<div class="resourcecontainer"><img class="resourceimage" src="http://s187242710.onlinehome.us/tdsa/images/sampleresource.jpg" width="190" height="120" border="0"></div>

<br><br>




<div id="test1" class="hidden">

</div>
<div id="test2" class="hidden">
    <div class="resourcevideo">
        <div class="videolink"><a id="prev" href="javascript:show('test1');">(Previous)</a></div>
        <div class="videolink"><a id="current" href="javascript:show('test1');" accesskey="k">[Close]</a></div>
        <div class="videolink"><a id="next" href="javascript:show('test3');">(Next)</a></div>
        <div id="player"></div>
    </div>
</div>

完整代码可以在这里找到https://jsfiddle.net/shoaibakhter/xz7tfs2d/8/

关于javascript - 停止YouTube视频的代码？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36512786/

上一篇：javascript - Angular Controller 中的 jquery focusin 和 focusout

下一篇：javascript - 为什么我的 raphael.JS 圈子中仅有的一个是动画的？

相关文章：

javascript - 包含数千行的 HTML 表格

html - 与 chrome 相比，SVG viewbox 在 IE 中呈现不同的位置

javascript - 解析为 JSON 字符串对象时换行符不起作用

javascript - 弹出窗口在服务器端不起作用，但在本地起作用

javascript - Angular，如何将类设置为单击的列表项并从其他 li 项中删除？

asp.net - 查找设计问题(html、css)

html - 透明粘性导航栏不起作用

javascript - 在推送的 Canvas 对象上使用 drawimage() 时出现错误消息，而 preloading() 没有帮助

PHP with or logical 并向 li 全局导航添加一个类

css - 棘手的 CSS 纠结 : Link styles from separate divs all seeming to pull style from elsewhere

©2024 IT工具网  联系我们