Uppodプレーヤー用の独自のJSラッパー

背景

少し前までは、サイトにビデオプレーヤーが必要でした。 長い検索の後、 Uppodコンストラクターに決めました。HTML5とFlashの両方のバージョン、便利なスタイルコンストラクターなどがあるためですが、それでも何かが欠けていました。つまり、Flashがない場合のHTML5レンダリングです。 ブラウザでのフラッシュサポートを決定するコードを除いて、ドキュメントにはあまり見当たりませんでした。 一般的に、 松葉杖のおかげで、私は問題を解決し、JSとUppod APIを使用して作業モデルを作成しました。そして、それをあなたと共有したいと思います。

挑戦する

1.さまざまなセクションのサイトに共通のビデオプレーヤーを埋め込みます。これにより、YouTube、Rutube、およびそのメディアコンテンツからビデオが再生されます。

2.ブラウザに提供するプレーヤーを決定します。

3.特定の場合（たとえば、フラッシュがない場合）、プレーヤーではなく別のコマンドを起動します。

4.シェルを作成して、Uppodプレーヤーの動作原理を変更するときに、サイト全体のコードに触れずにすべてをすばやく書き直し、必要に応じてプレーヤー自体またはその一部の機能を無効化または交換します。

5.すべてのセクションに大量のコードを記述することは、実際にはハントではないため、埋め込みを単純化する

何が必要ですか？

指示html5とフラッシュプレーヤーに応じた簡単な接続。 一般に、すべてはUppodのドキュメントに従っています 。

仕事に行こう

まず、player.jsファイルを作成し、サイトのあるフォルダーに配置します。



Player.jsファイルコード



Flashサポートの定義（ ソースを参照）：

var ua = navigator.userAgent.toLowerCase(); var flashInstalled = 0; if (typeof(navigator.plugins) != "undefined" && typeof(navigator.plugins["Shockwave Flash"]) == "object") { flashInstalled = 1; } else if (typeof window.ActiveXObject != "undefined") { try { if (new ActiveXObject("ShockwaveFlash.ShockwaveFlash")) { flashInstalled = 1; } } catch(e) {}; };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

また、Uppod JavaScript API（ ソースを参照）：

 function uppodEvent(playerID, event) { switch(event){ case 'init': break; case 'start': break; case 'play': break; case 'pause': break; case 'stop': break; case 'seek': break; case 'loaded': break; case 'end': break; case 'download': break; case 'quality': break; case 'error': break; case 'ad_end': break; case 'pl': break; case 'volume': break; } } function uppodSend(playerID, com, callback) { document.getElementById(playerID).sendToUppod(com); } function uppodGet(playerID, com, callback) { return document.getElementById(playerID).getUppod(com); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

次に、プレーヤーの起動を初期化するコードを既に作成します。

 function Player(e, callback) { vars = { m: e.type, id: e.id, uid: e.id, finder: e.finder, detect: e.detect, }; if (e.file) { vars.file = e.file; } if (e.pl) { vars.pl = e.pl; } if (e.st) { vars.st = e.st; } if (e.st5) { vars.st5 = e.st5; } if (e.screen) { vars.poster = e.screen; } if (!e.style) { e.style = {w: '480px', h: '360px'}; } if ((e.finder === 'flash' && !flashInstalled) || (e.finder === 'html5' && flashInstalled)) { callback(); } else if ((ua.indexOf("iphone") != -1 || ua.indexOf("ipad") != -1 || ua.indexOf("android") != -1 || ua.indexOf("windows phone") != -1 || ua.indexOf("blackberry") != -1 || e.detect == 'html5') && e.detect != 'flash') { htm5Player(e); } else { if(!flashInstalled && e.detect != 'flash') { htm5Player(e); } else { params = { "id": e.id, "allowFullScreen": "true", "allowScriptAccess": "always", } new swfobject.embedSWF(e.swf, vars.id, e.style.w, e.style.h, "10.0.0", false, vars, params); } } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

HTML5プレーヤーを起動する関数：

 function htm5Player(e) { vars = { m: e.type, uid: e.id, }; if (e.screen) { vars.poster = e.screen; } if (e.file) { vars.file = e.file; } if (e.pl) { vars.pl = e.pl; } if (e.st5) { vars.st = e.st5; } player = new Uppod(vars); uppodDetect(e.id, 'html5'); var doc = document.getElementById(e.id); doc.style.width = e.style.w; doc.style.height = e.style.h; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

プレーヤーの追加属性を作成および読み取るための関数：

 function uppodDetect(id, type) { doc = document.getElementById(id); if (type) { doc.setAttribute('data-uppod-detect', type); } detect = doc.getAttribute('data-uppod-detect'); if (detect == 'html5') { return 'html5'; } return 'flash'; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

UppodプレーヤーのリクエストAPI関数のエイリアスは、若干近代化されています：

 function sendPlayer(id, com, callback) { if (uppodDetect(id) == 'flash') { document.getElementById(id).sendToUppod(com); } else { if (com == 'play') { player.Play() } else if (com == 'pause') { player.Pause() } else if (com == 'toggle') { player.Toggle() } else if (com == 'stop') { player.Stop() } else if (com.match(/file:/i)) { com = com.replace(/file:/g, ''); player.Play(com); } else if (com.match(/v/i)) { com = com.replace(/v/g, ''); player.Volume(com / 100); } else if (com == 'download') { player.Download(); } } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これですべてです。player.jsを保存し、プレーヤーのすべてのjsファイルと同様に、サイトのヘッドに接続します。

 <script src="http://site.ru/player.js" type="text/javascript"></script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

プレーヤーの初期化とパラメーター分析

まず、パラメーターを分析しましょう。パラメーターの大部分は、 Uppodプレーヤーのドキュメントに記載されているとおりです。



id-プレーヤーのコンテナ識別子

st-スタイルへのリンク

pl-プレイリストまたはそれへのリンク

file-メディアファイルへのリンク（plが指定されていない場合）

type-プレーヤータイプのオーディオ/ビデオ

screen-ビデオスクリーンセーバーへのリンク

swf-プレーヤーへのリンク

st5 -HTML5プレーヤーのスタイル変数の名前、またはスタイルコード

finder -flash / html5プロパティ;指定されたプレーヤーが起動に失敗した場合、コールバック関数を返します

detect -flash / html5プロパティ、指定されたプレーヤーの強制起動

必須パラメーターを使用した簡単な例（html5およびflashバージョンの場合）

 <div id="player"></div> <script type="text/javascript"> vars = { id: 'player', // id  type: 'video', //   file: 'video.mp4', //    swf: 'uppod.swf', //    }; new Player(vars); </script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

プレーヤーの1つのバージョンのみを実行し、サポートされていない場合、コールバック関数が返される場合のサンプルコード：

 <div id="player"></div> <script type="text/javascript"> vars = { id: 'player', type: 'video', file: 'http://rutube.ru/video/bde119ee2ce067e7fc6124398d7043d3/', //   Rutube   flash  swf: 'player/uppod-rutube.swf', finder: 'flash', }; new Player(vars, function () { document.getElementById('player').innerHTML = '<iframe src="http://rutube.ru/play/embed/7821719" width="100%" height="360" frameborder="0"></iframe>'; //    flash,      . }); </script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Uppodプレーヤーの両方のバージョンでサポートされているAPIコントロールボタン（いくつかありますが、特に注目しませんでした）：



play-プレーヤーを起動します

一時停止 -一時停止

停止 -停止

トグル -開始/一時停止

v50-ボリューム50％

file-新しいファイルを実行します（ファイル：url）

これらのボタンはsendPlayer関数（「player_id」、「command」）から機能します。



例：

 <a onclick="sendPlayer('player', 'play');" title="">Play</a> <a onclick="sendPlayer('player', 'pause');" title="">Pause</a> <a onclick="sendPlayer('player', 'toggle');" title=" / ">Toggle</a> <a onclick="sendPlayer('player', 'stop');" title="">Stop</a> <a onclick="sendPlayer('player', 'v50');" title="=50"> 50%</a> <a onclick="sendPlayer('player', 'file:http://uppod.net/sample.flv');" title="  ">File:Url</a>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

まあ、実際には、私が書きたかったのはそれだけです。 誰がそれを必要とし、健康のためにそれを使用します。



ここに例を見ることができます。完成したplayer.jsはこのリンクからダウンロードできます。