Streaming JS

Preview is below.

StreamingJS について

StreamingJS は PHP などで構築された動画サイトに広告動画を埋め込むための支援スクリプトです。

著作権とかその他

ソースコード(HTMLなど)にこのページのリンクをお願いします。

https://devras.info/streaming/

バグとかあったら 教えてください。
@kema_ch

                
// Streaming JS

/*
 * カスタイマイズ性を優先しているため、
 * サンプルの機能の一部は独自実装です。
 * 
 * 必要であればこのサンプルのソースコードを参照してください。
 */

StreamingSettings.AdvSrc = "動画広告のURL";
StreamingSettings.VideoSrc = "メイン動画のURL";
StreamingSettings.EnableAdv = true; // 広告を有効にする場合は必須
StreamingSettings.EnableMute = false; // ミュートする場合は true に cookie と紐づけたほうが楽?

/*
 * Googleに承認されたサイトでのみ使用可能
 * 
 * 例えば、 Youtube など
 * true にすると自動再生が有効になります。
 * 
 * ただし承認されていないサイトではエラーが発生し、イベントはスルーされます。
 * 
 * 規模が 1000 以上だと承認されるそうですが、詳しいことはわかっていません。
 * 各自で調べて使用してください ;(
 */
StreamingSettings.EnableWhitelisted = false;

/*
 * 広告を再生中にプリロードを実行する場合に有効にしてください。
 * ただし、動画のサイズが大きい場合ページ全体でエラーとして吐き出されます。
 * 
 * EnableBlob のみを有効にした場合は、動画読み込み時にBlobを使用します。
 * EnablePreload を有効にした場合は EnableBlob の有効が必須です。
 */
StreamingSettings.EnablePreload = true;
StreamingSettings.EnableBlob = true;

StreamingSettings.EnableAutoMime = true; // なくても問題ないかも MIME を指定させます。

/*
 * 動画再生終了後に自動的に次の動画に移るときに有効にしてください。
 * 有効にした場合 NextVideoURL の指定が必須です。
 * 
 * また EnableLoop が有効の場合 このイベントは発生しません。
 */
StreamingSettings.EnableNextVideo = true;
StreamingSettings.NextVideoURL = "?next";

// ループ再生
StreamingSettings.EnableLoop = true;

/*
 * プレイヤーのステータスが変わった時に発生します。
 * state: int
 *   0 == 広告再生中
 *   1 == 動画再生中
 * settings: StreamingSettings
 */
StreamingSettings.ChangeStateEvent = function(state, settings) {
    console.log (state);
};

// 動画の初期化を行います。
// 引数には 動画要素のID (video#id) を指定します。
Streaming("id");

// 動画要素を取得します。
let media = GetStreamingElement();

// 広告をスキップします。
SkipAdv();

// フルスクリーンにするには
RequestFullScreenWith(media);

// フルスクリーンを解除するには
document.exitFullscreen();

// 関数で自動化するには

function toggleFullScreen() {
    if (document.fullscreenElement) {
        try {
            document.exitFullscreen();
        } catch (e) {}
    } else {
        RequestFullScreenWith(media);
    }
}

// メディアが再生可能かどうか
// コーデックの指定も可能です。
// canPlayType("mime", videoElement);
canPlayType("video/mp4", media);