HTML5用video(動画)を別ウィンドウで開く【jQuery】

HTML5用video(動画)を別ウィンドウで開く【jQuery】

<video></video>で作られた動画を別ウィンドウで開くスクリプト。

jQuery必須でDOMの追加には未対応。

↑のようなボタンが出て押すと別ウィンドウで表示。動画のサイズで表示する。

 

$(function () {
    var vid = $('video');
    vid.each(function (i, e) {
        e.addEventListener('loadedmetadata', function () {
            var width = e.videoWidth
            var height = e.videoHeight
            var src = $(e).attr('src');
            $(e).after('<div class="video_custom_controls"><button data-width="' + width + '" data-height="' + height + '" data-src="' + src + '" class="popup">別ウィンドウで開く</button></div>')
        })
    })

    $(document).on('click', '.popup', function () {
        WindowOpen($(this).data('src'), $(this).data('width'), $(this).data('height'))
    })
});

function WindowOpen(src, x, y) {
    var Win1 = window.open('', 'subWindow', 'width=' + x + ',height=' + y + '');
    Win1.document.clear();
    Win1.document.write('<!DOCTYPE html><html><head><meta http-equiv=Content-Type content="text/html; charset=utf-8"><title>Sub Window</title></head><body style="margin: 0; background: black; overflow: hidden;"><video controls="" loop="" autoplay="" src="' + src + '" style="width: 100%; height: auto;"></video></body></html>');
    Win1.document.close();
}

 

4.e.addEventListener(‘loadedmetadata’, function (){ }

動画のメタ情報を入手できたら行う処理。

5-7行目で動画の元のサイズとソースを入手しています。

7.var src = $(e).attr(‘src’);

※属性値から取っているのでコードによってはソースを取れない場合あり。

 

17-22行目は新しくウィンドウを生成する関数WindowOpen(ソース,ウィンドウ横幅,ウィンドウ高さ)です。

 

javascript版でDOMの追加に対応したものを作れば需要があるかもしれません。

再生位置の受け渡しも付けると良いでしょう。

       ____
     /⌒  ⌒\
   /  癶   癶 \
  /::::::⌒(__人__)⌒::::: \ コメント待ってるよー
  |     |r┬-|     |
  \      `ー'´     /

コメントを残す

メールアドレスが公開されることはありません。

内容をご確認の上、送信してください。URLを含むコメントは承認待ちになります。