<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の追加に対応したものを作れば需要があるかもしれません。
再生位置の受け渡しも付けると良いでしょう。
∩∩
（´･ω･）
＿| ⊃／(＿＿_
／ └-(＿＿＿_／
￣￣￣￣￣￣￣
来たら起こして。
⊂⌒／ヽ-、＿_
／⊂_/＿＿＿＿ ／
￣￣￣￣￣￣￣