如何为 YouTube 视频创建倒带功能答案

【问题标题】：How do I create a Rewind Functionality for YouTube video如何为 YouTube 视频创建倒带功能
【发布时间】：2017-02-28 13:20:26
【问题描述】：

嗨朋友们，我想开发一个倒带功能，当我单击倒带按钮时，YouTube 视频会在 I 帧倒带中显示 10 秒但我无法获得如何创建这个如果您有任何解决方案请分享很快就和我在一起。

这是我的代码。

    [![<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Youtube videos proxy server</title>
<!--        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>-->
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://www.youtube.com/iframe_api"></script>
    </head>
    <body>
        <?php        
        $val="";
        $vid="0TvTyj5FAaQ";
        $str = file_get_contents('video.json');
        $json = json_decode($str, true);
        foreach ($json as  $value) {
           if($value\["id"\]==$vid){
               $val="TRUE";
               break;
           }else{
               continue;
           }
           }           
             if($val=="TRUE"){ ?>
        <div>
            <div style="height: 345px;width: 700px;background: black;">
                <span style="color: white;">This video has restricted content.</span>
            </div>
        </div>  
             <?php }else{
        ?>
        <div id="player">
        <iframe id="player" width="700" height="345" src="https://www.youtube.com/embed/<?php echo $vid?>?enablejsapi=1&showinfo=0&rel=0"> </iframe>
        <br/>
        <button id='rwnd' onclick="rewind()" >Rewind</button>
        </div>
             <?php } ?> 
   <script type="text/javascript">
    var player=document.getElementById("player");
          var rewind= function(){
              if (! player){alert("no obj");
              }else{

            alert('hello');
            var currentTime = player.getCurrentTime();
            console.log(currentTime);
            if(currentTime>5){
            player.seekTo(currentTime - 5, true);
            player.playVideo();
        }
    }
    };
    </script>

    </body>
</html>][1]][1]

这里是 video.json 文件。

[
{
"id": "0dV1Bwe2v6c"    
},
{
"id":"0dmhKtQ74wo"
},
{
"id":"0dV1Bwe2v6c"    
}
]

【问题讨论】：

标签： javascript php iframe youtube youtube-iframe-api

【解决方案1】：

朋友们，我现在得到了答案，希望它也能帮助你。 json 文件与我在代码中添加的问题相同。

这是解决方案....

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Youtube videos proxy server</title>
<!--        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>-->
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://www.youtube.com/iframe_api"></script>
    </head>
    <body>
        <?php        
        $val="";
        $vid="0TvTyj5FAaQ";
        $str = file_get_contents('video.json');
        $json = json_decode($str, true);
        foreach ($json as  $value) {
           if($value["id"]==$vid){
               $val="TRUE";
               break;
           }else{
               continue;
           }
           }           
             if($val=="TRUE"){ ?>
        <div>
            <div style="height: 345px;width: 700px;background: black;">
                <span style="color: white;">This video has restricted content.</span>
            </div>
        </div>  
             <?php }else{
        ?>
        <div id="player1">
        <iframe id="player" width="700" height="345" src="https://www.youtube.com/embed/<?php echo $vid?>?enablejsapi=1&showinfo=0&rel=0"> </iframe>
        <br/>
        <button id='rwnd' disabled>Rewind</button>
        </div>
             <?php } ?> 
   <script type="text/javascript">
        var player;
        function onYouTubePlayerAPIReady() {
            player = new YT.Player('player', {
              events: {
                'onStateChange': onPlayerReady
              }
            });
        }
        function onPlayerReady(event){
           if(player.getPlayerState()===1 || player.getPlayerState()===2){
                $('#rwnd').prop('disabled', false);
                $( "#rwnd" ).click(function() {
                rewind();
              });
            }else{
                $('#rwnd').prop('disabled', true);
            }
    }
    function rewind(){
            var currentTime = player.getCurrentTime();
            if(currentTime>10){
            player.seekTo(currentTime - 10, true);
            player.playVideo();
        }else{
            player.stopVideo();
           console.log("Try to rewind video when current playing time greater than 10.");

        }

    };
    </script>

    </body>
</html>

【讨论】：