Fatal编程技术网

Google chrome extension 我能'；t在chrome扩展上播放youtube无铬播放器

google-chrome-extension youtube youtube-api

Google chrome extension 我能'；t在chrome扩展上播放youtube无铬播放器,google-chrome-extension,youtube,youtube-api,youtube-javascript-api,Google Chrome Extension,Youtube,Youtube Api,Youtube Javascript Api,我是chrome extension的新手。我正在制作能够播放youtube无铬播放器的chrome扩展 它在chrome浏览器上工作。但是，它在chrome扩展上不起作用 我测试了本地的.swf文件。这是在chrome扩展上进行的 我认为，chrome扩展无法调用onYouTubePlayerReady（） 因此，我在swfobject.embedSWF（）之后调用了window.onYouTubePlayerReady（）。但是，它在ytplayer.loadVideoById（“xa8TB

我是chrome extension的新手。我正在制作能够播放youtube无铬播放器的chrome扩展

它在chrome浏览器上工作。但是，它在chrome扩展上不起作用

我测试了本地的.swf文件。这是在chrome扩展上进行的

我认为，chrome扩展无法调用onYouTubePlayerReady（）

因此，我在
swfobject.embedSWF（）之后调用了
window.onYouTubePlayerReady（）
。但是，它在
ytplayer.loadVideoById（“xa8TBfPw3u0”，0）中不起作用显示错误消息

错误消息是
uncaughttypeerror:Object没有方法'loadVideoById'


manifest.json中是否存在问题？还是在YouTube API中？我不知道他为什么不做chrome扩展

popup.html是


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>YouTube Play</title>
    </head>
    <body>
    <table width="1000" height="390">
        <tr>
            <td>
            <div id="videoDiv">
                Loading...
            </div></td>
            <td valign="top">
            <div id="videoInfo">
                <p>
                    Player state: <span id="playerState">--</span>
                </p>
                <p>
                    Current Time: <span id="videoCurrentTime">--:--</span> | Duration: <span id="videoDuration">--:--</span>
                </p>
                <p>
                    Bytes Total: <span id="bytesTotal">--</span> | Start Bytes: <span id="startBytes">--</span> | Bytes Loaded: <span id="bytesLoaded">--</span>
                </p>
                <p>
                    Controls: <input type="button" id="play" value="Play" />
                    <input type="button" id="pause" value="Pause" />
                    <input type="button" id="mute" value="Mute" />
                    <input type="button" id="unmute" value="Unmute" />
                </p>
                <p>
                    <input id="volumeSetting" type="text" size="3" />
                    &nbsp;<input type="button" id="setVolume" value="Set Volume" /> | Volume: <span id="volume">--</span>
                </p>
            </div></td>
        </tr>
    </table>

    <script type="text/javascript" src="jsapi.js"></script>
    <script type="text/javascript" src="my_script.js"></script>
    <script type="text/javascript" src="swfobject.js"></script>
    </body>
</html>



{
    "manifest_version": 2,
    "name": "YouTube Player",
    "description": "This extension is YouTube Player",
    "version": "1.0",
    "browser_action": {
        "default_icon": "icon.png",
        "default_popup": "popup.html"
    },
    "permissions": ["tabs", "http://*/*", "https://*/*", "background"],
    "content_scripts": [
        {
            "matches": ["http://www.youtube.com/*"],
            "js": ["my_script.js", "swfobject.js", "jsapi.js"]
        }
    ]
}



/*
* Chromeless player has no controls.
*/

// Update a particular HTML element with a new value
function updateHTML(elmId, value) {
    document.getElementById(elmId).innerHTML = value;
}

// This function is called when an error is thrown by the player
function onPlayerError(errorCode) {
    alert("An error occured of type:" + errorCode);
}

// This function is called when the player changes state
function onPlayerStateChange(newState) {
    updateHTML("playerState", newState);
}

// Display information about the current state of the player
function updatePlayerInfo() {
    // Also check that at least one function exists since when IE unloads the
    // page, it will destroy the SWF before clearing the interval.
    if (ytplayer && ytplayer.getDuration) {
        updateHTML("videoDuration", ytplayer.getDuration());
        updateHTML("videoCurrentTime", ytplayer.getCurrentTime());
        updateHTML("bytesTotal", ytplayer.getVideoBytesTotal());
        updateHTML("startBytes", ytplayer.getVideoStartBytes());
        updateHTML("bytesLoaded", ytplayer.getVideoBytesLoaded());
        updateHTML("volume", ytplayer.getVolume());
    }
}

// Allow the user to set the volume from 0-100
function setVideoVolume() {
    var volume = parseInt(document.getElementById("volumeSetting").value);
    if (isNaN(volume) || volume < 0 || volume > 100) {
        alert("Please enter a valid volume between 0 and 100.");
    } else if (ytplayer) {
        ytplayer.setVolume(volume);
    }
}

function playVideo() {
    if (ytplayer) {
        ytplayer.playVideo();
    }
}

function pauseVideo() {
    if (ytplayer) {
        ytplayer.pauseVideo();
    }
}

function muteVideo() {
    if (ytplayer) {
        ytplayer.mute();
    }
}

function unMuteVideo() {
    if (ytplayer) {
        ytplayer.unMute();
    }
}

// This function is automatically called by the player once it loads
function onYouTubePlayerReady(playerId) {
    ytplayer = document.getElementById("ytPlayer");
    // This causes the updatePlayerInfo function to be called every 250ms to
    // get fresh data from the player
    setInterval(updatePlayerInfo, 250);
    updatePlayerInfo();
    ytplayer.addEventListener("onStateChange", "onPlayerStateChange");
    ytplayer.addEventListener("onError", "onPlayerError");
    //Load an initial video into the player
    ytplayer.loadVideoById("xa8TBfPw3u0", 0);
}

// The "main method" of this sample. Called when someone clicks "Run".
function loadPlayer() {
    // Lets Flash from another domain call JavaScript
    var params = {
        allowScriptAccess : "always"
    };
    // The element id of the Flash embed
    var atts = {
        id : "ytPlayer"
    };
    // All of the magic handled by SWFObject (http://code.google.com/p/swfobject/)
    swfobject.embedSWF("http://www.youtube.com/apiplayer?" + "&enablejsapi=1&playerapiid=ytplayer", "videoDiv", "640", "390", "8", null, null, params, atts);

    //window.onYouTubePlayerReady();

    document.getElementById("play").onclick = playVideo;
    document.getElementById("pause").onclick = pauseVideo;
    document.getElementById("mute").onclick = muteVideo;
    document.getElementById("unmute").onclick = unMuteVideo;
    document.getElementById("setVolume").onclick = setVideoVolume;
}

function _run() {
    loadPlayer();
}

google.setOnLoadCallback(_run);


我的脚本.js是


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>YouTube Play</title>
    </head>
    <body>
    <table width="1000" height="390">
        <tr>
            <td>
            <div id="videoDiv">
                Loading...
            </div></td>
            <td valign="top">
            <div id="videoInfo">
                <p>
                    Player state: <span id="playerState">--</span>
                </p>
                <p>
                    Current Time: <span id="videoCurrentTime">--:--</span> | Duration: <span id="videoDuration">--:--</span>
                </p>
                <p>
                    Bytes Total: <span id="bytesTotal">--</span> | Start Bytes: <span id="startBytes">--</span> | Bytes Loaded: <span id="bytesLoaded">--</span>
                </p>
                <p>
                    Controls: <input type="button" id="play" value="Play" />
                    <input type="button" id="pause" value="Pause" />
                    <input type="button" id="mute" value="Mute" />
                    <input type="button" id="unmute" value="Unmute" />
                </p>
                <p>
                    <input id="volumeSetting" type="text" size="3" />
                    &nbsp;<input type="button" id="setVolume" value="Set Volume" /> | Volume: <span id="volume">--</span>
                </p>
            </div></td>
        </tr>
    </table>

    <script type="text/javascript" src="jsapi.js"></script>
    <script type="text/javascript" src="my_script.js"></script>
    <script type="text/javascript" src="swfobject.js"></script>
    </body>
</html>



{
    "manifest_version": 2,
    "name": "YouTube Player",
    "description": "This extension is YouTube Player",
    "version": "1.0",
    "browser_action": {
        "default_icon": "icon.png",
        "default_popup": "popup.html"
    },
    "permissions": ["tabs", "http://*/*", "https://*/*", "background"],
    "content_scripts": [
        {
            "matches": ["http://www.youtube.com/*"],
            "js": ["my_script.js", "swfobject.js", "jsapi.js"]
        }
    ]
}



/*
* Chromeless player has no controls.
*/

// Update a particular HTML element with a new value
function updateHTML(elmId, value) {
    document.getElementById(elmId).innerHTML = value;
}

// This function is called when an error is thrown by the player
function onPlayerError(errorCode) {
    alert("An error occured of type:" + errorCode);
}

// This function is called when the player changes state
function onPlayerStateChange(newState) {
    updateHTML("playerState", newState);
}

// Display information about the current state of the player
function updatePlayerInfo() {
    // Also check that at least one function exists since when IE unloads the
    // page, it will destroy the SWF before clearing the interval.
    if (ytplayer && ytplayer.getDuration) {
        updateHTML("videoDuration", ytplayer.getDuration());
        updateHTML("videoCurrentTime", ytplayer.getCurrentTime());
        updateHTML("bytesTotal", ytplayer.getVideoBytesTotal());
        updateHTML("startBytes", ytplayer.getVideoStartBytes());
        updateHTML("bytesLoaded", ytplayer.getVideoBytesLoaded());
        updateHTML("volume", ytplayer.getVolume());
    }
}

// Allow the user to set the volume from 0-100
function setVideoVolume() {
    var volume = parseInt(document.getElementById("volumeSetting").value);
    if (isNaN(volume) || volume < 0 || volume > 100) {
        alert("Please enter a valid volume between 0 and 100.");
    } else if (ytplayer) {
        ytplayer.setVolume(volume);
    }
}

function playVideo() {
    if (ytplayer) {
        ytplayer.playVideo();
    }
}

function pauseVideo() {
    if (ytplayer) {
        ytplayer.pauseVideo();
    }
}

function muteVideo() {
    if (ytplayer) {
        ytplayer.mute();
    }
}

function unMuteVideo() {
    if (ytplayer) {
        ytplayer.unMute();
    }
}

// This function is automatically called by the player once it loads
function onYouTubePlayerReady(playerId) {
    ytplayer = document.getElementById("ytPlayer");
    // This causes the updatePlayerInfo function to be called every 250ms to
    // get fresh data from the player
    setInterval(updatePlayerInfo, 250);
    updatePlayerInfo();
    ytplayer.addEventListener("onStateChange", "onPlayerStateChange");
    ytplayer.addEventListener("onError", "onPlayerError");
    //Load an initial video into the player
    ytplayer.loadVideoById("xa8TBfPw3u0", 0);
}

// The "main method" of this sample. Called when someone clicks "Run".
function loadPlayer() {
    // Lets Flash from another domain call JavaScript
    var params = {
        allowScriptAccess : "always"
    };
    // The element id of the Flash embed
    var atts = {
        id : "ytPlayer"
    };
    // All of the magic handled by SWFObject (http://code.google.com/p/swfobject/)
    swfobject.embedSWF("http://www.youtube.com/apiplayer?" + "&enablejsapi=1&playerapiid=ytplayer", "videoDiv", "640", "390", "8", null, null, params, atts);

    //window.onYouTubePlayerReady();

    document.getElementById("play").onclick = playVideo;
    document.getElementById("pause").onclick = pauseVideo;
    document.getElementById("mute").onclick = muteVideo;
    document.getElementById("unmute").onclick = unMuteVideo;
    document.getElementById("setVolume").onclick = setVideoVolume;
}

function _run() {
    loadPlayer();
}

google.setOnLoadCallback(_run);



/*
*无铬播放器没有控制。
*/
//使用新值更新特定HTML元素
函数updateHTML（elmId，value）{
document.getElementById（elmId）.innerHTML=value；
}
//当播放机抛出错误时调用此函数
函数onplayerror（错误代码）{
警报（“发生类型为：+errorCode的错误”）；
}
//当播放器改变状态时调用此函数
函数onPlayerStateChange（newState）{
updateHTML（“playerState”，newState）；
}
//显示有关播放机当前状态的信息
函数updatePlayerInfo（）{
//还要检查IE卸载后是否至少存在一个函数
//第页，它将在清除间隔之前销毁SWF。
if（ytplayer&&ytplayer.getDuration）{
updateHTML（“videoDuration”，ytplayer.getDuration（））；
updateHTML（“videoCurrentTime”，ytplayer.getCurrentTime（））；
updateHTML（“bytesTotal”，ytplayer.getVideoBytesTotal（））；
updateHTML（“startBytes”，ytplayer.getVideoStartBytes（））；
updateHTML（“bytesload”，ytplayer.getvideobytesload（））；
updateHTML（“volume”，ytplayer.getVolume（））；
}
}
//允许用户将音量设置为0-100
函数setVideoVolume（）{
var volume=parseInt（document.getElementById（“volumeSetting”）.value）；
如果（isNaN（体积）| |体积<0 | |体积>100）{
警报（“请输入介于0和100之间的有效卷”）；
}else if（玩家）{
ytplayer.setVolume（音量）；
}
}
函数playVideo（）{
如果（玩家）{
ytplayer.playVideo（）；
}
}
函数pauseVideo（）{
如果（玩家）{
ytplayer.pauseVideo（）；
}
}
函数muteVideo（）{
如果（玩家）{
ytplayer.mute（）；
}
}
函数unMuteVideo（）{
如果（玩家）{
ytplayer.unMute（）；
}
}
//此函数在加载后由播放机自动调用
函数onYouTubePlayerReady（playerId）{
ytplayer=document.getElementById（“ytplayer”）；
//这会导致每250ms调用一次updatePlayerInfo函数
//从玩家那里获取新数据
setInterval（updatePlayerInfo，250）；
updatePlayerInfo（）；
ytplayer.addEventListener（“onStateChange”、“onPlayerStateChange”）；
ytplayer.addEventListener（“onError”、“onplayerror”）；
//将初始视频加载到播放器中
ytplayer.loadVideoById（“xa8TBfPw3u0”，0）；
}
//本样本的“主要方法”。当有人单击“运行”时调用。
函数loadPlayer（）{
//允许从另一个域调用JavaScript刷新
变量参数={
allowScriptAccess：“始终”
};
//闪存的元素id
var atts={
id:“玩家”
};
//SWFObject处理的所有魔法(http://code.google.com/p/swfobject/)
swfobject.embeddeswf（“http://www.youtube.com/apiplayer?“+”&enablejsapi=1&playerapiid=ytplayer”、“videoDiv”、“640”、“390”、“8”、null、null、params、atts）；
//window.onYouTubePlayerReady（）；
document.getElementById（“play”）.onclick=playVideo；
document.getElementById（“pause”）.onclick=pauseVideo；
document.getElementById（“mute”）.onclick=muteVideo；
document.getElementById（“unmute”）.onclick=unmutedvideo；
document.getElementById（“setVolume”）.onclick=setVideoVolume；
}
函数_run（）{
loadPlayer（）；
}
setOnLoadCallback（_run）；



请帮助我。
最近，我在处理Chrome扩展时遇到了同样的问题。测试时，调用不会被触发。在我读完这篇文章之前：

要测试这些调用中的任何一个，您必须让您的文件在Web服务器上运行，因为Flash player限制本地文件和internet之间的调用


您可能需要阅读@格肖恩·巴拉斯写了这封信，也许能帮上忙。听起来他已经走过这条路了。@bean5谢谢你的评论。我查过了。但是，我的情况是在Chrome扩展上解决的。我认为许可是问题的核心。我找不到youtube api对Chrome扩展的许可。