Question

这是一个index.php文件，我在那里编写代码以停止在iframe上同时播放视频。哪些在控制台上工作正常但在这里没有工作。我不知道我应该调用这个脚本的问题是什么。

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <meta charset="UTF-8">
        <title>youtube Channel Videos</title>
    <style>
        body{
        background: #f4f4f4;
        font-family: "Arial" sans-serif;
        font-size: 14px;
        color: #666;
        }
        #container{
        width: 800px;
        overflow: auto;
        margin: auto;
        background: #fff;
        padding: 15px;
        }
    </style>
    <script src="js/jquery.min.js"></script>
    <script type="text/javascript" src="http://www.youtube.com/player_api"></script>
    <script src="js/script.js"></script>


    </head>
    <body>

    <?php
    // put your code here
    ?>
    <div id="container">
        <h1>Youtube Videos</h1>
        <ul id="results">

        </ul>

    </div>
    <script>
    players = new Array();
alert($("iframe.yt_players"));
function onYouTubeIframeAPIReady() {
    var temp = $("iframe.yt_players");    
    for (var i = 0; i < temp.length; i++) {
        var t = new YT.Player($(temp[i]).attr('id'), {
            events: {
                'onStateChange': onPlayerStateChange
            }
        });
        players.push(t);
    }

}
onYouTubeIframeAPIReady();


function onPlayerStateChange(event) {

    if (event.data == YT.PlayerState.PLAYING) {
        var temp = event.target.a.src;
        var tempPlayers = $("iframe.yt_players");
        for (var i = 0; i < players.length; i++) {
            if (players[i].a.src != temp) players[i].stopVideo();

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

这是一个script.js文件，其中列出了来自频道ID的所有YouTube视频，其中包含了所有可见的信息。使用youtube data api。

    function tplawesome(template, data) {
    // initiate the result to the basic template
    res = template;
    // for each data key, replace the content of the brackets with the data
    for(var i = 0; i < data.length; i++) {
        res = res.replace(/\{\{(.*?)\}\}/g, function(match, j) { // some magic regex
            return data[i][j];
        })
    }
    return res;
}
var channelName= "TechGuyWeb";
$(document).ready(function(){
    $.get("https://www.googleapis.com/youtube/v3/channels",{
    part: 'contentDetails',
    forUsername: channelName,
    key:'AIzaSyBX94DoCYdtIwALVPfqSVar6izj3wCJ1M4'},
    function(data){
    $.each(data.items,function(i, item){

        var pid = item.contentDetails.relatedPlaylists.uploads;
        //console.log(pid);     
        getvids(pid);
    });
    }
    );
//var pid="TechGuyWeb";
//getvids(pid);
    function getvids(pid){
    $.get("https://www.googleapis.com/youtube/v3/playlistItems",{
    part: 'snippet',
    maxResults: 10,
    playlistId:pid,
    key:'AIzaSyBX94DoCYdtIwALVPfqSVar6izj3wCJ1M4'},
    function(data){
    var output;
    $.each(data.items,function(i, item){
        //console.log(data);
        var v_id = item.snippet.resourceId.videoId;

        //alert(item.snippet.resourceId.videoId);
        //var video_title = item.snippet.title;
        //output= '<li>'+video_title+'</li>';
        $.get("item.html",function(data){
        $('#results').append(tplawesome(data, [{"title":item.snippet.title,"videoid":item.snippet.resourceId.videoId}]));
        getcount(v_id);
        });
        //$('#results').append(output);
    });
    }
    );
    }
    function getcount(v_id){
    $.get("https://www.googleapis.com/youtube/v3/videos",{
    part: 'statistics',
    id: v_id,
    key:'AIzaSyBX94DoCYdtIwALVPfqSVar6izj3wCJ1M4'},
    function(data){
    $.each(data.items,function(i, item){

        var views = item.statistics.viewCount;
        console.log(views);  
        $('#'+v_id).append(views);

    });
    }
    );
    }

});

以下是编写iframe代码的item.html文件。

    <div class="item" >
    <h2>{{title}}</h2>     
    <iframe id="player{{videoid}}"  class="yt_players" width="640" height="360" src="//www.youtube.com/embed/{{videoid}}?rel=0&wmode=Opaque&enablejsapi=1;showinfo=0;controls=0" frameborder="0" allowfullscreen onload></iframe>
    <div><h5>Total Views: <span id="{{videoid}}"></span></h5> </div>
</div

如果stackoverflow团队在此代码中发现问题，请尽快回复我。请在script.js文件中设置api密钥以检查

Answer 1

我认为你的javascript在你的Dom创建之前就已经运行了。因此，在执行脚本之前，请使用 window.onload 或jQuery $（document）.ready（）函数。

<script>
    players = new Array();
    alert($("iframe.yt_players"));
    function onYouTubeIframeAPIReady() {
        var temp = $("iframe.yt_players");    
        for (var i = 0; i < temp.length; i++) {
            var t = new YT.Player($(temp[i]).attr('id'), {
                events: {
                    'onStateChange': onPlayerStateChange
                }
            });
            players.push(t);
        }

    }

    function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.PLAYING) {
            var temp = event.target.a.src;
            var tempPlayers = $("iframe.yt_players");
            for (var i = 0; i < players.length; i++) {
                if (players[i].a.src != temp) players[i].stopVideo();

            }
        }
    }

    window.onload = setTimeout(onYouTubeIframeAPIReady, 800);
</script>

OR 如果它不能使用setTimeout执行您的函数一段时间延迟。在此期间

{{1}}

如何一次停止在iframe上播放多个视频

1 个答案: