by htsign
2013-04-28 [2013/04/28 18:17:21]
マルチメディア要素へのリンクのクリックイベントに<audio>や<video>なウィンドウをポップアップする機能をオーバーライドする
@@ -6,8 +6,8 @@ */-// 本当は子要素の大きさに合わせて（ブラウザごとに<audio>や<video>のコントローラの大きさが異なるので）ウィンドウの大きさを変えたいけど-// やり方が分からないので、エロい人教えろください+// 一つのウィンドウでaudioとvideoを同時再生するとウィンドウのサイズがえらいことになりますが、 +// 非常にレアケースだと思われるので無視しています。「運用回避してください。」 (function(){ @@ -51,7 +51,7 @@ return false; }- var elems = document.getElementsByTagName("a");+ var elems = document.querySelectorAll("a[href], area[href]"); elems = Array.prototype.slice.call(elems); // A要素を全て抽出 for (var i in elems) { @@ -75,13 +75,33 @@ } else { openPopup();- return false;+ evt.preventDefault(); } }; function openPopup() { var popup = window.open("", "media-popup", "menubar=no,toolbar=no,location=no,status=no,scrollbars=yes"); var doc = popup.document; + var rect; + var element; + + var diff = { + width: popup.outerWidth - doc.documentElement.clientWidth, + height: popup.outerHeight - doc.documentElement.clientHeight + }; + + if (!rect) { + element = doc.createElement(mediaType); + element.setAttribute("controls", "controls"); + doc.body.appendChild(element); + rect = element.getBoundingClientRect(); + doc.body.removeChild(element); + } + + doc.body.addEventListener("DOMSubtreeModified", function(){ // 要素数が変化したらウィンドウサイズを変える + var len = this.childNodes.length; + popup.resizeTo( rect.width + diff.width, rect.height * len + diff.height ); + }, false); var style = doc.createElement("style"); doc.querySelector("head").appendChild(style); @@ -99,8 +119,6 @@ s.insertRule(value, i++); });- var element; // 殻の中身を定義-element = doc.createElement(mediaType); element.setAttribute("src", target.href); element.setAttribute("autoplay", "autoplay"); @@ -110,9 +128,12 @@ close(); }, false);- doc.body.appendChild(element);- var rect = element.getBoundingClientRect();- popup.resizeTo(rect.width + 80, rect.height + 200);+ /* + 末尾に挿入する + appendChildでないのはIEがDOMSubtreeModifiedに反応しない（らしい）ため + http://msdn.microsoft.com/en-us/library/gg558014(v=vs.85).aspx + */ + doc.body.insertBefore(element, doc.body.lastChild); function close() { // ポップアップ内のメディアがゼロのとき、子ウィンドウを閉じる doc.querySelectorAll( allowList.join(",") ).length === 0
/*
* @title メディア再生窓生成
* @description マルチメディア要素へのリンクのクリックイベントに<audio>や<video>なウィンドウをポップアップする機能をオーバーライドする
* @include http://*
* @license NYSL
*/
// 一つのウィンドウでaudioとvideoを同時再生するとウィンドウのサイズがえらいことになりますが、
// 非常にレアケースだと思われるので無視しています。「運用回避してください。」
(function(){
var checked = []; // 同じURLに複数回リクエストを送るのを防ぐためのリストを格納
var timeout = 30 * 1000; // タイムアウトになるまでの時間（単位：ms）
var allowList = ["audio", "video"];
if (!HTMLAnchorElement.prototype.addPopup) { // addPopupメソッドをA要素に追加
Object.defineProperty(HTMLAnchorElement.prototype, "addPopup", {
value: function(url){
var self = this;
var xhr = new XMLHttpRequest(); // HEADリクエストを送る
xhr.open("HEAD", url, true);
xhr.onreadystatechange = function(){
if (xhr.readyState === 4) {
console.log(xhr.status + " : " + url);
if (xhr.status !== 200) return;
var header = xhr.getResponseHeader("Content-Type");
var type = header.split("/")[0];
if (allowList.some(function(v){ return v === type })) { // いずれかにヒットすれば true
console.log(header + " - OK");
addPopupItem(self, type);
}
}
};
xhr.send(null);
window.setTimeout(function(){ // 一定時間でタイムアウト
xhr.abort();
}, timeout);
}
});
}
else {
return false;
}
var elems = document.querySelectorAll("a[href], area[href]");
elems = Array.prototype.slice.call(elems); // A要素を全て抽出
for (var i in elems) {
var url = elems[i].href;
if (url.indexOf("http") === 0) {
url = url.split("#")[0]; // URLに # を含む場合は除去
if (checked.every(function(li){ return url !== li })) { // 全てとアンマッチなら true
checked.push(url);
elems[i].addPopup(url);
}
}
}
function addPopupItem(target, mediaType) { // ポップアップを生成
target.onclick = function(evt){
if (evt.ctrlKey && evt.altKey) {
return true; // Ctrl+Alt を押しながらクリックすれば普段のクリックと同じ効果
}
else {
openPopup();
evt.preventDefault();
}
};
function openPopup() {
var popup = window.open("", "media-popup", "menubar=no,toolbar=no,location=no,status=no,scrollbars=yes");
var doc = popup.document;
var rect;
var element;
var diff = {
width: popup.outerWidth - doc.documentElement.clientWidth,
height: popup.outerHeight - doc.documentElement.clientHeight
};
if (!rect) {
element = doc.createElement(mediaType);
element.setAttribute("controls", "controls");
doc.body.appendChild(element);
rect = element.getBoundingClientRect();
doc.body.removeChild(element);
}
doc.body.addEventListener("DOMSubtreeModified", function(){ // 要素数が変化したらウィンドウサイズを変える
var len = this.childNodes.length;
popup.resizeTo( rect.width + diff.width, rect.height * len + diff.height );
}, false);
var style = doc.createElement("style");
doc.querySelector("head").appendChild(style);
var s = style.sheet, i = 0;
[
"body {"
+ "margin: 0;"
+ "padding: 0;"
+ "}",
"audio {"
+ "display: block;"
+ "margin: auto;"
+ "}"
].forEach(function(value){
s.insertRule(value, i++);
});
element = doc.createElement(mediaType);
element.setAttribute("src", target.href);
element.setAttribute("autoplay", "autoplay");
element.setAttribute("controls", "controls");
element.addEventListener("ended", function(){ // 終端まで移動したら自らを削除する
this.parentElement.removeChild(this);
close();
}, false);
/*
末尾に挿入する
appendChildでないのはIEがDOMSubtreeModifiedに反応しない（らしい）ため
http://msdn.microsoft.com/en-us/library/gg558014(v=vs.85).aspx
*/
doc.body.insertBefore(element, doc.body.lastChild);
function close() { // ポップアップ内のメディアがゼロのとき、子ウィンドウを閉じる
doc.querySelectorAll( allowList.join(",") ).length === 0
? popup.close() : 0;
}
}
}
})();