Fatal编程技术网
  • javascript/
  • Javascript 嵌入式YouTube视频赢得'；重播

Javascript 嵌入式YouTube视频赢得'；重播

javascript html iframe video youtube

Javascript 嵌入式YouTube视频赢得'；重播,javascript,html,iframe,video,youtube,Javascript,Html,Iframe,Video,Youtube,奇怪的是：嵌入的YouTube视频一旦播放（通过点击“播放”或在页面加载时自动播放）就不会再播放了 我使用的是直接从YouTube复制的标准iFrame嵌入。在我测试过的所有浏览器/操作系统组合（Windows/Mac上的Chrome/Safari/Firefox/IE）中，都会出现这种情况 代码如下： <iframe width="420" height="315" src="//www.youtube.com/embed/OuSdU8tbcHY" frameborder="0" all

奇怪的是：嵌入的YouTube视频一旦播放（通过点击“播放”或在页面加载时自动播放）就不会再播放了

我使用的是直接从YouTube复制的标准iFrame嵌入。在我测试过的所有浏览器/操作系统组合（Windows/Mac上的Chrome/Safari/Firefox/IE）中，都会出现这种情况

代码如下：

<iframe width="420" height="315" src="//www.youtube.com/embed/OuSdU8tbcHY" frameborder="0" allowfullscreen></iframe>
您可以在上看到它的作用。

可能是这样的：

这不是一个完美的解决方案，因为您在iframe之外插入视频，但可能会让您继续（更改src将始终重新加载视频）

好吧，我不知道如何解决这个问题，但这里有一个解决方法。 一般的想法是在视频结束时在“重新加载”按钮上放置一个div，当单击div时，视频将重新加载，因为常规方法不起作用

这是我使用的代码，在代码中div是蓝色的，用于可视化

<!DOCTYPE html>
<html>
    <body>
        <div id="player_prop" style="position:relative;"><iframe id="player" type="text/html" width="640" height="390"
            src="http://www.youtube.com/embed/OuSdU8tbcHY?enablejsapi=1"
            frameborder="0"></iframe></div>
        <script>
            // 2. This code loads the IFrame Player API code asynchronously.
            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;
            function onYouTubeIframeAPIReady() {
              player = new YT.Player('player', {
                events: {
                  'onReady': onPlayerReady,
                  'onStateChange': onPlayerStateChange
                }
              });
            }

            // 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.



            //from mantish http://stackoverflow.com/questions/3452546/javascript-regex-how-to-get-youtube-video-id-from-url
            function youtube_parser(url){
                var regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/;
                var match = url.match(regExp);
                if (match&&match[2].length==11){
                    return match[2];
                }else{
                    //error
                }
            }
            //end of Lasnvs code

            function restart_vid()
            {
                el = document.getElementById("fake_replay_button");
                vid_id = youtube_parser(document.getElementById('player').src);
                player.loadVideoById(vid_id);
                el.parentNode.removeChild(el);
            }

            function fakeplay()
            {
                el = document.getElementById("player_prop");
                var xPos = el.offsetLeft
                var yPos = el.offsetHeight - 30;
                var pseudoPlay = document.createElement('div');
                pseudoPlay.setAttribute('style', 'background-color:blue; cursor:pointer; display:block; width:55px; height:25px; position:absolute; top:'+yPos+'px;');
                pseudoPlay.setAttribute('onclick','restart_vid()');
                pseudoPlay.setAttribute('id','fake_replay_button');
                el.appendChild(pseudoPlay);
            }
            function onPlayerStateChange(event) 
            {
                if(event.data==YT.PlayerState.ENDED)
                {
                    fakeplay();    
                }
            }

        </script>
    </body>
</html>


// 2. 此代码异步加载IFrame播放器API代码。
var tag=document.createElement（'script'）；
tag.src=”https://www.youtube.com/iframe_api";
var firstScriptTag=document.getElementsByTagName（'script'）[0]；
firstScriptTag.parentNode.insertBefore（标记，firstScriptTag）；
// 3. 此函数用于创建（和YouTube播放器）
//API代码下载后。
var播放器；
函数onyoutubeiframeapiredy（）{
player=新的YT.player（'player'{
活动：{
“onReady”：onPlayerReady，
“onStateChange”：onPlayerStateChange
}
});
}
// 4. 当视频播放器准备就绪时，API将调用此函数。
函数onPlayerReady（事件）{
event.target.playVideo（）；
}
// 5. 当播放器的状态改变时，API调用此函数。
//该功能指示播放视频时（状态=1），
//玩家应该玩六秒钟，然后停下来。
//来自曼蒂什http://stackoverflow.com/questions/3452546/javascript-regex-how-to-get-youtube-video-id-from-url
函数解析程序（url）{
var regExp=/^.*（youtu.be\/|v\/|u\/\w\/|embed\/|watch\？v=\&v=）（[^和\？]*）。/；
var match=url.match（regExp）；
if（match&&match[2]。长度==11）{
返回匹配[2]；
}否则{
//错误
}
}
//Lasnvs代码结束
函数重新启动_vid（）
{
el=document.getElementById（“假回放按钮”）；
vid_id=youtube_解析器（document.getElementById（'player'）.src）；
player.loadVideoById（vid_id）；
el.parentNode.removeChild（el）；
}
函数fakeplay（）
{
el=document.getElementById（“玩家”道具）；
var xPos=el.offsetLeft
var yPos=离地高度-30；
var pseudoPlay=document.createElement（'div'）；
pseudoPlay.setAttribute（'style'，'background color:blue；cursor:pointer；display:block；宽度：55px；高度：25px；位置：绝对；top:'+yPos+'px；'）；
setAttribute（'onclick'，'restart_vid（）'）；
pseudoPlay.setAttribute（'id'，'fake_replay_button'）；
el.儿童（假游戏）；
}
函数onPlayerStateChange（事件）
{
if（event.data==YT.PlayerState.end）
{
假装玩（）；
}
}
要使用此代码，您所要做的就是复制并粘贴脚本部分，而不是仅使用此代码

<iframe width="420" height="315" src="//www.youtube.com/embed/OuSdU8tbcHY" frameborder="0" allowfullscreen></iframe>
给它一个id=player，通过在src的末尾添加？enablejsapi=1来启用jsapi，并用id=player_prop将iframe括在一个div中，确保该div具有属性position:relative，否则按钮的对齐将关闭，它应该是这样的

<div id="player_prop" style="position:relative;">
<iframe id="player" type="text/html" width="640" height="390" src="http://www.youtube.com/embed/OuSdU8tbcHY?enablejsapi=1" frameborder="0"></iframe>
</div>
当然，这里有一个链接到

，所以这个问题似乎与视频长度无关；这是flash播放器的问题。如果flash player已加载，且用户与控件完全没有交互，则当播放器完成时，它将不会重新加载iframe（尽管它会引发“video ended”（视频结束）事件……当您尝试重新加载时，它不会发出重新加载视频的正确调用，因此无法重新启动播放）。你也可以测试更长的视频；如果你开始观察它们，不使用磨砂棒，它们也会表现出同样的行为。同样，在非常短的视频中，如果开始播放，然后稍微移动（甚至向后移动），这将触发iframe重新加载（类似于@SuperMan所指出的），因此当视频结束时，重新加载将正常工作

这很可能是Flash播放器中最近引入的一个bug，而HTML5播放器中不存在这个bug；因此，如果您的用例允许，最简单的解决方案是通过在iframe的源代码中附加？HTML5=1来强制HTML5播放器

然而，如果flash播放器是一个铁一般的要求，那么你可以破解你的代码，迫使它在完成后重新加载（而不是等待用户点击重新加载或重放按钮）


var tag=document.createElement（'script'）；
tag.src=”https://www.youtube.com/iframe_api";
var firstScriptTag=document.getElementsByTagName（'script'）[0]；
firstScriptTag.parentNode.insertBefore（标记，firstScriptTag）；
var播放器；
函数onyoutubeiframeapiredy（）{
player=新的YT.player（'player'{
活动：{
声明更改：

<div id="player_prop" style="position:relative;">
<iframe id="player" type="text/html" width="640" height="390" src="http://www.youtube.com/embed/OuSdU8tbcHY?enablejsapi=1" frameborder="0"></iframe>
</div>



<html>
<body>
<script>
      var tag = document.createElement('script');
      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
      var player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          events: {
                onStateChange: 'onPlayerStateChange'
          }
        });
      }

      function onPlayerStateChange(event) {
        if (event.data===YT.PlayerState.ENDED) {
                event.target.cueVideoById(event.target.getVideoData().video_id);
        }
      }

</script>
<iframe width="420" height="315" src="//www.youtube.com/embed/OuSdU8tbcHY" frameborder="0" allowfullscreen id="player"></iframe>
</body>
</html>