javascript - JWPlayer JS 插件添加到 flash 版本

Question

我修改了一个 JWPlayer 插件(http://www.pluginsbyethan.com/newsticker6.html)，它最终在播放 mp4 格式的 HTML5 版本上运行良好，但是当我切换到 Flash 版本时，播放器崩溃了。

为什么我的Flash版本无法实现插件？

如果我使用回调到 .swf 文件，那是不相关的，它不会崩溃，那么 Flash 播放器只支持 .swf flash 插件，还是我可以以某种方式为 Flash 播放器定义 JS 插件？

代码如下所示；

jwplayer().registerPlugin("ticker", "6.0", function(player, config) {

    function setup() {
            var theBody = document.getElementById(player.id);

            var playerWidthPX2 = player.getHeight();
            var playerWidthPX = parseFloat(playerWidthPX2);
            var playerHeightPX2 = player.getWidth();
            var playerHeightPX = parseFloat(playerHeightPX2);

            var ticker_top = document.createElement("div");
            var ticker_top_marquee = document.createElement("marquee");
            var ticker_middle = document.createElement("div");
            var ticker_middle_marquee = document.createElement("marquee");
            var ticker_middle_date = document.createElement("div");

            // top
            ticker_top.setAttribute("id", "ticker_top");
            ticker_top.style.background = "#e3bfa3";
            ticker_top.style.height = 26 + "px";
            ticker_top.style.width = "100%";
            ticker_top.style.position = "absolute";
            ticker_top.style.zIndex = "1";
            ticker_top.style.bottom = "25px";
            ticker_top.style.opacity = "1";
            ticker_top.style.visibility = "hidden";

            // Marquee too ticker_middle
            ticker_top_marquee.setAttribute("id", "ticker_top_marquee");
            ticker_top_marquee.style.color = "#000000";
            ticker_top_marquee.innerHTML = config.ticker1;
            ticker_top_marquee.setAttribute("scrollamount", "6");
            ticker_top_marquee.setAttribute("direction", "left");
            ticker_top_marquee.style.fontSize = "18px";
            ticker_top_marquee.style.fontWeight = "600";
            ticker_top_marquee.style.textTransform = "uppercase";
            ticker_top_marquee.style.cursor = "default";
            ticker_top_marquee.style.fontFamily = "PT Sans";
            ticker_top_marquee.style.position = "absolute";
            ticker_top_marquee.style.zIndex = "2";
            ticker_top_marquee.style.width = "100%";
            ticker_top_marquee.style.bottom = "23px";
            ticker_top_marquee.style.visibility = "hidden";
            ticker_top_marquee.style.opacity = "1";

            // middle
            ticker_middle.setAttribute("id", "ticker_middle");
            ticker_middle.style.background = "#000000";
            ticker_middle.style.height = 25 + "px";
            ticker_middle.style.width = "100%";
            ticker_middle.style.position = "absolute";
            ticker_middle.style.zIndex = "1";
            ticker_middle.style.bottom = "0px";
            ticker_middle.style.opacity = "1";
            ticker_middle.style.visibility = "hidden";

            // Marquee too ticker_middle
            ticker_middle_marquee.setAttribute("id", "ticker_middle_marquee");
            ticker_middle_marquee.style.color = "#ec008b";
            ticker_middle_marquee.innerHTML = config.ticker2;
            ticker_middle_marquee.setAttribute("scrollamount", "7");
            ticker_middle_marquee.setAttribute("direction", "left");
            ticker_middle_marquee.style.fontSize = "16px";
            ticker_middle_marquee.style.fontWeight = "600";
            ticker_middle_marquee.style.cursor = "default";
            ticker_middle_marquee.style.fontFamily = "PT Sans";
            ticker_middle_marquee.style.position = "absolute";
            ticker_middle_marquee.style.zIndex = "3";
            ticker_middle_marquee.style.width = "100%";
            ticker_middle_marquee.style.textTransform = "uppercase";
            ticker_middle_marquee.style.bottom = "0px";
            ticker_middle_marquee.style.visibility = "hidden";
            ticker_middle_marquee.style.opacity = "1";

            // middle date
            ticker_middle_date.setAttribute("id", "ticker_middle_date");
            ticker_middle_date.style.background = "#FFF";
            ticker_middle_date.style.height = 25 + "px";
            ticker_middle_date.style.width = "100px";
            ticker_middle_date.style.position = "absolute";
            ticker_middle_date.style.fontSize = "16px";
            ticker_middle_date.style.textAlign = "center";
            ticker_middle_date.style.fontWeight = "600";
            ticker_middle_date.style.cursor = "default";
            ticker_middle_date.style.fontFamily = "PT Sans";
            ticker_middle_date.style.zIndex = "3";
            ticker_middle_date.style.bottom = "0px";
            ticker_middle_date.style.left = "0px";
            ticker_middle_date.style.opacity = "1";
            ticker_middle_date.style.visibility = "hidden";
            ticker_middle_date.innerHTML = config.date;

            theBody.onmouseover = function(){
                ticker_top.style.visibility = "hidden";
                ticker_top_marquee.style.visibility = "hidden";
                ticker_middle.style.visibility = "hidden";
                ticker_middle_marquee.style.visibility = "hidden";
                ticker_middle_date.style.visibility = "hidden";
            }
            theBody.onmouseout = function(){
                ticker_top.style.visibility = "visible";
                ticker_top_marquee.style.visibility = "visible";
                ticker_middle.style.visibility = "visible";
                ticker_middle_marquee.style.visibility = "visible";
                ticker_middle_date.style.visibility = "visible";

            }

            //Append it
            theBody.appendChild(ticker_top);
            theBody.appendChild(ticker_top_marquee);
            theBody.appendChild(ticker_middle);
            theBody.appendChild(ticker_middle_marquee);
            theBody.appendChild(ticker_middle_date);

    }

    player.onReady(setup);

    player.onPlay(function() {
        var ticker_top = document.getElementById('ticker_top');
        var ticker_top_marquee = document.getElementById('ticker_top_marquee');
        var ticker_middle = document.getElementById('ticker_middle');
        var ticker_middle_marquee = document.getElementById('ticker_middle_marquee');
        var ticker_middle_date = document.getElementById('ticker_middle_date');

        ticker_top.style.visibility = "visible";
        ticker_top_marquee.style.visibility = "visible";
        ticker_middle.style.visibility = "visible";
        ticker_middle_marquee.style.visibility = "visible";
        ticker_middle_date.style.visibility = "visible";
    });

    this.resize = function() {
        var ticker_top = document.getElementById('ticker_top');
        var ticker_top_marquee = document.getElementById('ticker_top_marquee');
        var ticker_middle = document.getElementById('ticker_middle');
        var ticker_middle_marquee = document.getElementById('ticker_middle_marquee');
        var ticker_middle_date = document.getElementById('ticker_middle_date');

        if(player.getFullscreen() == true){
            ticker_top.style.visibility = "visible";
            ticker_top_marquee.style.visibility = "visible";
            ticker_middle.style.visibility = "visible";
            ticker_middle_marquee.style.visibility = "visible";
            ticker_middle_date.style.visibility = "visible";
        }
        // if(player.getFullscreen() == false){
        //  ticker_top.style.visibility = "hidden";
        //  ticker_top_marquee.style.visibility = "hidden";
        //  ticker_middle.style.visibility = "hidden";
        //  ticker_middle_marquee.style.visibility = "hidden";
        //  ticker_middle_date.style.visibility = "hidden";
        // }
    }

}, '');

谢谢，堆栈。

Answer 1

看起来你在这里修改了我的插件 - http://www.pluginsbyethan.com/newsticker6.html

这个插件本来是用Flash写的，所以JS版本回退到Flash版本是这样的:

}, 'newsticker.swf');

您删除了引号中的 swf，但现在 JS 插件试图退回到不存在的 swf 文件:

}, '');

此外，在 Flash 模式下，播放器会添加一个包装器 ID。

这是一些没有任何 Flash 回退的更新代码，它似乎可以工作:

(function(jwplayer) {
    var template = function(player, config, ticker) {
        function setup(evt) {
            if (player.getRenderingMode() == "html5") {
                var theBody = document.getElementById(player.id);
            } else {
                var theBody = document.getElementById(player.id + "_wrapper");
            }

                        var playerWidthPX2 = player.getHeight();
                        var playerWidthPX = parseFloat(playerWidthPX2);
                        var playerHeightPX2 = player.getWidth();
                        var playerHeightPX = parseFloat(playerHeightPX2);

                        var ticker_top = document.createElement("div");
                        var ticker_top_marquee = document.createElement("marquee");
                        var ticker_middle = document.createElement("div");
                        var ticker_middle_marquee = document.createElement("marquee");
                        var ticker_middle_date = document.createElement("div");

                        // top
                        ticker_top.setAttribute("id", "ticker_top");
                        ticker_top.style.background = "#e3bfa3";
                        ticker_top.style.height = 26 + "px";
                        ticker_top.style.width = "100%";
                        ticker_top.style.position = "absolute";
                        ticker_top.style.zIndex = "1";
                        ticker_top.style.bottom = "25px";
                        ticker_top.style.opacity = "1";
                        ticker_top.style.visibility = "hidden";

                        // Marquee too ticker_middle
                        ticker_top_marquee.setAttribute("id", "ticker_top_marquee");
                        ticker_top_marquee.style.color = "#000000";
                        ticker_top_marquee.innerHTML = config.ticker1;
                        ticker_top_marquee.setAttribute("scrollamount", "6");
                        ticker_top_marquee.setAttribute("direction", "left");
                        ticker_top_marquee.style.fontSize = "18px";
                        ticker_top_marquee.style.fontWeight = "600";
                        ticker_top_marquee.style.textTransform = "uppercase";
                        ticker_top_marquee.style.cursor = "default";
                        ticker_top_marquee.style.fontFamily = "PT Sans";
                        ticker_top_marquee.style.position = "absolute";
                        ticker_top_marquee.style.zIndex = "2";
                        ticker_top_marquee.style.width = "100%";
                        ticker_top_marquee.style.bottom = "23px";
                        ticker_top_marquee.style.visibility = "hidden";
                        ticker_top_marquee.style.opacity = "1";

                        // middle
                        ticker_middle.setAttribute("id", "ticker_middle");
                        ticker_middle.style.background = "#000000";
                        ticker_middle.style.height = 25 + "px";
                        ticker_middle.style.width = "100%";
                        ticker_middle.style.position = "absolute";
                        ticker_middle.style.zIndex = "1";
                        ticker_middle.style.bottom = "0px";
                        ticker_middle.style.opacity = "1";
                        ticker_middle.style.visibility = "hidden";

                        // Marquee too ticker_middle
                        ticker_middle_marquee.setAttribute("id", "ticker_middle_marquee");
                        ticker_middle_marquee.style.color = "#ec008b";
                        ticker_middle_marquee.innerHTML = config.ticker2;
                        ticker_middle_marquee.setAttribute("scrollamount", "7");
                        ticker_middle_marquee.setAttribute("direction", "left");
                        ticker_middle_marquee.style.fontSize = "16px";
                        ticker_middle_marquee.style.fontWeight = "600";
                        ticker_middle_marquee.style.cursor = "default";
                        ticker_middle_marquee.style.fontFamily = "PT Sans";
                        ticker_middle_marquee.style.position = "absolute";
                        ticker_middle_marquee.style.zIndex = "3";
                        ticker_middle_marquee.style.width = "100%";
                        ticker_middle_marquee.style.textTransform = "uppercase";
                        ticker_middle_marquee.style.bottom = "0px";
                        ticker_middle_marquee.style.visibility = "hidden";
                        ticker_middle_marquee.style.opacity = "1";

                        // middle date
                        ticker_middle_date.setAttribute("id", "ticker_middle_date");
                        ticker_middle_date.style.background = "#FFF";
                        ticker_middle_date.style.height = 25 + "px";
                        ticker_middle_date.style.width = "100px";
                        ticker_middle_date.style.position = "absolute";
                        ticker_middle_date.style.fontSize = "16px";
                        ticker_middle_date.style.textAlign = "center";
                        ticker_middle_date.style.fontWeight = "600";
                        ticker_middle_date.style.cursor = "default";
                        ticker_middle_date.style.fontFamily = "PT Sans";
                        ticker_middle_date.style.zIndex = "3";
                        ticker_middle_date.style.bottom = "0px";
                        ticker_middle_date.style.left = "0px";
                        ticker_middle_date.style.opacity = "1";
                        ticker_middle_date.style.visibility = "hidden";
                        ticker_middle_date.innerHTML = config.date;

                        theBody.onmouseover = function(){
                            ticker_top.style.visibility = "hidden";
                            ticker_top_marquee.style.visibility = "hidden";
                            ticker_middle.style.visibility = "hidden";
                            ticker_middle_marquee.style.visibility = "hidden";
                            ticker_middle_date.style.visibility = "hidden";
                        }
                        theBody.onmouseout = function(){
                            ticker_top.style.visibility = "visible";
                            ticker_top_marquee.style.visibility = "visible";
                            ticker_middle.style.visibility = "visible";
                            ticker_middle_marquee.style.visibility = "visible";
                            ticker_middle_date.style.visibility = "visible";

                        }

                        //Append it
                        theBody.appendChild(ticker_top);
                        theBody.appendChild(ticker_top_marquee);
                        theBody.appendChild(ticker_middle);
                        theBody.appendChild(ticker_middle_marquee);
                        theBody.appendChild(ticker_middle_date);
        };
        player.onReady(setup);

        player.onReady(setup);

    player.onPlay(function() {
        var ticker_top = document.getElementById('ticker_top');
        var ticker_top_marquee = document.getElementById('ticker_top_marquee');
        var ticker_middle = document.getElementById('ticker_middle');
        var ticker_middle_marquee = document.getElementById('ticker_middle_marquee');
        var ticker_middle_date = document.getElementById('ticker_middle_date');

        ticker_top.style.visibility = "visible";
        ticker_top_marquee.style.visibility = "visible";
        ticker_middle.style.visibility = "visible";
        ticker_middle_marquee.style.visibility = "visible";
        ticker_middle_date.style.visibility = "visible";
    });

    this.resize = function() {
        var ticker_top = document.getElementById('ticker_top');
        var ticker_top_marquee = document.getElementById('ticker_top_marquee');
        var ticker_middle = document.getElementById('ticker_middle');
        var ticker_middle_marquee = document.getElementById('ticker_middle_marquee');
        var ticker_middle_date = document.getElementById('ticker_middle_date');

        if(player.getFullscreen() == true){
            ticker_top.style.visibility = "visible";
            ticker_top_marquee.style.visibility = "visible";
            ticker_middle.style.visibility = "visible";
            ticker_middle_marquee.style.visibility = "visible";
            ticker_middle_date.style.visibility = "visible";
        }
        // if(player.getFullscreen() == false){
        //  ticker_top.style.visibility = "hidden";
        //  ticker_top_marquee.style.visibility = "hidden";
        //  ticker_middle.style.visibility = "hidden";
        //  ticker_middle_marquee.style.visibility = "hidden";
        //  ticker_middle_date.style.visibility = "hidden";
        // }
    }

    };
    jwplayer().registerPlugin('ticker', '6.0', template);
})(jwplayer);