个人中心
gpt4 book ai didi

javascript - 如何停止在 iframe 上同时播放多个视频

转载 作者：行者123 更新时间：2023-12-03 06:40:53 25 4
gpt4 key购买 nike

This is a index.php file where i write the code to stop playing videos on iframe simultaneously.Which works fine on console but not worked here.I am not get What is the problem where i should call this script.

<!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>

This is a script.js file from where all youtube videos from channel id is listed with total seen information.using 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);

    });
    }
    );
    }

});

Here is the item.html file from where iframe code is written.

    <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

Please reply me soon if stackoverflow team found the problem in this code.Please set the api key in script.js file to check

最佳答案

我认为你的 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 = onYouTubeIframeAPIReady;
    </script>

或者如果它不起作用，请使用 setTimeout 延迟一段时间来执行您的函数。这段时间

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

关于javascript - 如何停止在 iframe 上同时播放多个视频，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37966458/

25 4 0
文章推荐： javascript - W2UI多选不返回最新值
文章推荐： javascript - 列出所有单击的图像按钮更改图像
文章推荐： javascript - 通过 onclick 调用动态创建的表单立即消失 Javascript
文章推荐： javascript - 如何使用 selenium web 驱动程序在代码镜像中输入值？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com