やろうとしていること
ビデオタグを使ってサムネイルを表示し、クリックイベントで全画面モーダルに
拡大したビデオを表示する
HTML
1<style> 2 #modalBase { 3 position: absolute; 4 display: none; 5 top: 0; 6 left: 0; 7 width: 100vw; 8 height: 100vh; 9 background-color: rgba(100, 200, 200, .7); 10 } 11</style> 12</head> 13<body translate="no"> 14 <video controls loop muted style="width:200px;height:300px;"> 15 <source src="https://player.vimeo.com/external/322244668.sd.mp4?s=338c48ac2dfcb1d4c0689968b5baf94eee6ca0c1&profile_id=165&oauth2_token_id=57447761" type="video/mp4"> 16 </video> 17 <div id="modalBase"></div> 18 19 <script> 20 var aVid = document.getElementsByTagName('video'); 21 var modal = document.getElementById('modalBase'); 22 23 aVid[0].onclick = function(e) { 24 modal.style.display = 'block'; 25 var video = document.createElement("video"); 26 video.appendChild(e.target.getElementsByTagName('source')[0]) 27 video.setAttribute("controls",""); 28 modal.appendChild(video) 29 } 30 31 modal.onclick = function(){ 32 this.textContent = null; 33 this.style.display = 'none'; 34 } 35 </script>
###困ってること1
Firefox Quantum 68.0.1ではVideoタグがクリックされても、
そのイベントがビデオのコントローラに吸い取られてしまって上記ハンドラが動作しない。
videoタグがクリックされたイベントを拾ういはどうすればいいでしょうか?
(親要素へのイベント移譲という選択肢は今回はないという前提)
###困ってること2
GoogleChrome v75.0.3770.142やSafari v12.1.1 (14607.2.6.1.1)やOpera v60.0.3255.160などでは
目的の動作をするのですが、モーダルに表示し、モーダルをクリックしてモーダルを消したあと、
再度、サムネイルのビデオタグをクリックしたら以下のエラーになる
Error
1TypeError: Argument 1 ('node') to Node.appendChild must be an instance of Node
Appendの引数がDOMでないという意味かと思うのですが、どうして2回目以降はこうなるのでしょう?
環境
MacOS Mojave 10.14.5
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。