我无法在Chrome扩展程序上播放YouTube无铬播放器 [英] I can't play youtube chromeless player on chrome extension

问题描述

我是Chrome扩展的新手。我制作了Chrome扩展程序，可以播放YouTube无铬播放器。

它在Chrome浏览器上工作。但是，它不适用于Chrome扩展。

我测试了本地.swf文件。

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

因此我在 swfobject.embedSWF（） window.onYouTubePlayerReady（） $ C>。但是，它在 ytplayer.loadVideoById（xa8TBfPw3u0，0）; 中有错误信息。

错误消息是 Uncaught TypeError：Object＃< HTMLObjectElement>没有方法'loadVideoById'。

在 manifest.json ？或者在YouTube API中？我不知道为什么无法使用Chrome扩展程序。

popup.html 是

 <！DOCTYPE html> 
< html> 
< head> 
< meta charset =UTF-8> 
< title> YouTube Play< / title> 
< / head> 
< body> 
< table width =1000height =390> 
< tr> 
< td> 
< div id =videoDiv> 
加载中... 
< / div>< / td> 
< td valign =top> 
< div id =videoInfo> 
< p> 
玩家状态：< span id =playerState>  - < / span> 
< / p> 
< p> 
当前时间：< span id =videoCurrentTime>  - ： - < / span> |持续时间：< span id =videoDuration>  - ： - < / span> 
< / p> 
< p> 
字节总数：< span id =bytesTotal>  - < / span> |开始字节：< span id =startBytes>  - < / span> |加载的字节数：< span id =bytesLoaded>  - < / span> 
< / p> 
< p> 
控件：< input type =buttonid =playvalue =Play/> 
< input type =buttonid =pausevalue =Pause/> 
< input type =buttonid =mutevalue =Mute/> 
< input type =buttonid =unmutevalue =Unmute/> 
< / p> 
< p> 
< input id =volumeSettingtype =textsize =3/> 
& nbsp;< input type =buttonid =setVolumevalue =Set Volume/> |卷：< span id =volume>  - < / span> 
< / p> 
< / div>< / td> 
< / tr> 
< / table> 
 
< script type =text / javascriptsrc =jsapi.js>< / script> 
< script type =text / javascriptsrc =my_script.js>< / script> 
< script type =text / javascriptsrc =swfobject.js>< / script> 
< / body> 
< / html> 
  

manifest.json 是

  {
manifest_version：2，
name：YouTube Player，
描述：此扩展程序为YouTube播放器，
版本：1.0，
browser_action：{
default_icon：icon.png，
 default_popup：popup.html
}，
permissions：[tabs，http：// * / *，https：// * / *，background ]，
content_scripts：[
 {
匹配：[http://www.youtube.com/*]，
js：[ my_script.js，swfobject.js，jsapi.js] 
} 
] 
} 
  

my_script.js 是

  / * 
 * Chromeless播放器没有控件。 
 * / 
 
 //用新值更新特定的HTML元素
函数updateHTML（elmId，value）{
 document.getElementById（elmId）.innerHTML =值; 
} 
 
 //当播放器发生错误时调用该函数
函数onPlayerError（errorCode）{
 alert（发生错误的类型为： + 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（bytesLoaded，ytplayer.getVideoBytesLoaded（））; 
 updateHTML（volume，ytplayer.getVolume（））; 
 
 
 
 //允许用户设置音量从0-100 
函数setVideoVolume（）{
 var volume = parseInt（document .getElementById（ volumeSetting）值）。 
 if（isNaN（volume）|| volume <0 || volume> 100）{
 alert（请输入0到100之间的有效音量。 
} else if（ytplayer）{
 ytplayer.setVolume（volume）; 
 
 
 
函数playVideo（）{
 if（ytplayer）{
 ytplayer.playVideo（）; 
 
 
 
函数pauseVideo（）{
 if（ytplayer）{
 ytplayer.pauseVideo（）; 
 
 
 
函数muteVideo（）{
 if（ytplayer）{
 ytplayer.mute（）; 
 
 
 
函数unMuteVideo（）{
 if（ytplayer）{
 ytplayer.unMute（）; 
} 
} 
 
 //这个函数一旦加载
函数就会自动调用onYouTubePlayerReady（playerId）{
 ytplayer = document.getElementById （ YouTube播放器）; 
 //这会导致每250ms调用updatePlayerInfo函数到
 //从播放器获取新鲜数据
 setInterval（updatePlayerInfo，250）; 
 updatePlayerInfo（）; 
 ytplayer.addEventListener（onStateChange，onPlayerStateChange）; 
 ytplayer.addEventListener（onError，onPlayerError）; 
 //将一个初始视频加载到播放器中
 ytplayer.loadVideoById（xa8TBfPw3u0，0）; 
} 
 
 //此示例的主要方法。有人点击运行时调用。 
函数loadPlayer（）{
 //让另一个域的Flash调用JavaScript 
 var params = {
 allowScriptAccess：always
}; 
 // Flash嵌入的元素ID 
 var atts = {
 id：ytPlayer
}; 
 // 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; 
} 
 
函数_run（）{
 loadPlayer（）; 
} 
 
 google.setOnLoadCallback（_run）; 
  

请帮助我。

解决方案

最近，我在使用Chrome扩展程序时遇到了同样的问题。测试时，通话不会被触发。直到我读到这个：

要测试这些调用中的任何一个，您必须让您的文件在网络服务器上运行，限制本地文件和互联网之间的通话。

从YouTube的Player API文档

I'm newbie at chrome extension. I'm making chrome extension that play youtube chromeless player.

It worked on chrome web browser. But, it isn't working on chrome extension.

I tested local .swf file. That is worked on chrome extension.

I think, chrome extension can't call onYouTubePlayerReady().

So I called window.onYouTubePlayerReady() after swfobject.embedSWF(). But, it isn't worked at ytplayer.loadVideoById("xa8TBfPw3u0", 0); with error message.

The error message was Uncaught TypeError: Object #<HTMLObjectElement> has no method 'loadVideoById'.

Is there a problem in manifest.json? Or in YouTube API? I don't know why isn't working on chrome extension.

popup.html is

<!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.json is

{
    "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"]
        }
    ]
}

my_script.js is

/*
* 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);

Please help me.

解决方案

Recently I've encountered the same issue when working on a Chrome extension. When testing, the calls are simply not triggered. Until I've read this:

To test any of these calls, you must have your file running on a webserver, as the Flash player restricts calls between local files and the internet.

From YouTube's Player API Documentation

这篇关于我无法在Chrome扩展程序上播放YouTube无铬播放器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！