0
私は、JavaScriptとCSSとHTMLのタッチスクリーンビデオキオスクコーディングに取り組んでいます。私はzer00neの投稿のおかげでかなりうまくいくいくつかのコードを持っています。私は、再生とフルスクリーン用のカスタムコントロールを備えた4つのビデオをページに持っています。私がビデオを全画面表示しても、その背後にある他のすべてのビデオのカスタムコントロールが表示されます。イムないように注意してください、なぜ私は、これらの値は、それとは何かを持っていることがわかります。ビデオがフルスクリーンのときにカスタムコントロールのz-インデックスを大きくする
video::-webkit-media-controls-enclosure { display:none !important; }
.vidBar1 { z-index: 2147483647; }
.vidBar2 { z-index: 2147483647; }
.vidBar3 { z-index: 2147483647; }
.vidBar4 { z-index: 2147483647; }
私はいかなる手段によってプログラマではないと私はただの多くでこれまでのところ、これを取得するために多くのことを苦労しています「借りた」コード。
上記の値を2147483646に設定し、各ビデオのフルスクリーンボタンのイベントリスナーで、そのビデオのカスタムコントロールのzインデックスがフルスクリーンで1ずつ増加し、フルスクリーンが終了すると1になります。要するに、1つのビデオがフルスクリーンであるとき、私はそのビデオとそのカスタムコントロール以外のものは見たくない。 私はそれが "どのように"行われなければならないかは確かではありませんが、私はそれに取り組むために残された限られた時間を持っているので、このプロジェクトをやりたいのですが、それは機能していない最後のものです。ここにコード全体を見ると、事前にあなたをとても感謝してください： `
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PowerHouse-VideoKiosk</title>
<style>
.vidFrame1 { position: absolute; top: 10%; width: 640px; height: auto; min-height: 180px; outline: 1px dashed red; }
.vidFrame2 { position: absolute; top: 10%; left: 50%; width: 640px; height: auto; min-height: 180px; outline: 1px dashed red; }
.vidFrame3 { position: absolute; top: 50%; left: 50%; width: 640px; height: auto; min-height: 180px; outline: 1px dashed red; }
.vidFrame4 { position: absolute; top: 50%; width: 640px; height: auto; min-height: 180px; outline: 1px dashed red; }
.vidBar1 { position: absolute; bottom: 0; right: 0; left: 0; height: 40px; width: 99%; z-index: 2;}
.vidBar2 { position: absolute; bottom: 0; right: 0; left: 0; height: 40px; width: 99%; z-index: 2;}
.vidBar3 { position: absolute; bottom: 0; right: 0; left: 0; height: 40px; width: 99%; z-index: 2;}
.vidBar4 { position: absolute; bottom: 0; right: 0; left: 0; height: 40px; width: 99%; z-index: 2;}
#fullScreen1 { position: absolute; bottom: 0; right: 0; width: 36px; height: 36px; outline: none; border: 1px solid transparent; border-radius: 6px; display: block; cursor: pointer; z-index: 3;}
#fullScreen2 { position: absolute; bottom: 0; right: 0; width: 36px; height: 36px; outline: none; border: 1px solid transparent; border-radius: 6px; display: block; cursor: pointer; z-index: 3;}
#fullScreen3 { position: absolute; bottom: 0; right: 0; width: 36px; height: 36px; outline: none; border: 1px solid transparent; border-radius: 6px; display: block; cursor: pointer; z-index: 3;}
#fullScreen4 { position: absolute; bottom: 0; right: 0; width: 36px; height: 36px; outline: none; border: 1px solid transparent; border-radius: 6px; display: block; cursor: pointer; z-index: 3;}
#fullScreen1:hover { border: 1px groove #0ef; }
#fullScreen2:hover { border: 1px groove #0ef; }
#fullScreen3:hover { border: 1px groove #0ef; }
#fullScreen4:hover { border: 1px groove #0ef; }
.on1, .off1 { background: url('https://glpro.s3.amazonaws.com/lib/bx/toggle.png') no-repeat; width: 36px; height: 36px; }
.on2, .off2 { background: url('https://glpro.s3.amazonaws.com/lib/bx/toggle.png') no-repeat; width: 36px; height: 36px; }
.on3, .off3 { background: url('https://glpro.s3.amazonaws.com/lib/bx/toggle.png') no-repeat; width: 36px; height: 36px; }
.on4, .off4 { background: url('https://glpro.s3.amazonaws.com/lib/bx/toggle.png') no-repeat; width: 36px; height: 36px; }
.off1 { background-position: 0 0 }
.off2 { background-position: 0 0 }
.off3 { background-position: 0 0 }
.off4 { background-position: 0 0 }
.on1 { background-position: -1px -50px }
.on2 { background-position: -1px -50px }
.on3 { background-position: -1px -50px }
.on4 { background-position: -1px -50px }
#playPause1 { position: absolute; bottom: 0; left: 0; width: 36px; height: 36px; background: none; font-size: 36px; color: #0ff; line-height: 1; border: 1px solid transparent; display: block; cursor: pointer; outline: none; z-index: 3;}
#playPause2 { position: absolute; bottom: 0; left: 0; width: 36px; height: 36px; background: none; font-size: 36px; color: #0ff; line-height: 1; border: 1px solid transparent; display: block; cursor: pointer; outline: none; z-index: 3;}
#playPause3 { position: absolute; bottom: 0; left: 0; width: 36px; height: 36px; background: none; font-size: 36px; color: #0ff; line-height: 1; border: 1px solid transparent; display: block; cursor: pointer; outline: none; z-index: 3;}
#playPause4 { position: absolute; bottom: 0; left: 0; width: 36px; height: 36px; background: none; font-size: 36px; color: #0ff; line-height: 1; border: 1px solid transparent; display: block; cursor: pointer; outline: none; z-index: 3;}
#playPause1.play1:before { content: '\25b6'; }
#playPause1.pause1:before { content: '\275a\275a'; }
#playPause2.play2:before { content: '\25b6'; }
#playPause2.pause2:before { content: '\275a\275a'; }
#playPause3.play3:before { content: '\25b6'; }
#playPause3.pause3:before { content: '\275a\275a'; }
#playPause4.play4:before { content: '\25b6'; }
#playPause4.pause4:before { content: '\275a\275a'; }
.vid1 { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: auto; display: block; z-index: 1; outline: 1px dotted blue; }
.vid2 { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: auto; display: block; z-index: 1; outline: 1px dotted blue; }
.vid3 { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: auto; display: block; z-index: 1; outline: 1px dotted blue; }
.vid4 { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: auto; display: block; z-index: 1; outline: 1px dotted blue; }
/*
Fullscreen Pseudo-class:
https://developer.mozilla.org/en-US/docs/Web/CSS/:fullscreen
*/
.vidBar1:-moz-full-screen { position: fixed; }
.vidBar1:-webkit-full-screen { position: fixed; }
.vidBar1:-ms-fullscreen { position: fixed; }
.vidBar1:fullscreen { position: fixed; }
.vidBar2:-moz-full-screen { position: fixed; }
.vidBar2:-webkit-full-screen { position: fixed; }
.vidBar2:-ms-fullscreen { position: fixed; }
.vidBar2:fullscreen { position: fixed; }
.vidBar3:-moz-full-screen { position: fixed; }
.vidBar3:-webkit-full-screen { position: fixed; }
.vidBar3:-ms-fullscreen { position: fixed; }
.vidBar3:fullscreen { position: fixed; }
.vidBar4:-moz-full-screen { position: fixed; }
.vidBar4:-webkit-full-screen { position: fixed; }
.vidBar4:-ms-fullscreen { position: fixed; }
.vidBar4:fullscreen { position: fixed; }
/*
Special Shadow DOM Settings to Override Default Controls:
https://css-tricks.com/custom-controls-in-html5-video-full-screen/
*/
video::-webkit-media-controls-enclosure { display:none !important; }
.vidBar1 { z-index: 2147483647; }
.vidBar2 { z-index: 2147483647; }
.vidBar3 { z-index: 2147483647; }
.vidBar4 { z-index: 2147483647; }
</style>
</head>
<body>
<figure class="vidFrame1">
<video id="vid1" class="vid1" autoplay muted loop src="Bill_Nye_the_Science_Guy_S01E18_Electricity.mp4"></video>
<figcaption class="vidBar1">
<button id='playPause1' class="play1" title="Play/Pause Video"></button>
<button id='fullScreen1' class="on1" title="Enter/Exit Full Screen"></button>
</figcaption>
</figure>
<figure class="vidFrame2">
<video id="vid2" class="vid2" autoplay muted loop src="Tesla'sWardenclyffeTowerandLab(3D Model).mp4"></video>
<figcaption class="vidBar2">
<button id='playPause2' class="play2" title="Play/Pause Video"></button>
<button id='fullScreen2' class="on2" title="Enter/Exit Full Screen"></button>
</figcaption>
</figure>
</figure>
<figure class="vidFrame3">
<video id="vid3" class="vid3" autoplay muted loop src="IntroductiontoElectricity.mp4"></video>
<figcaption class="vidBar3">
<button id='playPause3' class="play3" title="Play/Pause Video"></button>
<button id='fullScreen3' class="on3" title="Enter/Exit Full Screen"></button>
</figcaption>
</figure>
<figure class="vidFrame4">
<video id="vid4" class="vid4" autoplay muted loop src="FirstElectricBulbsbyThomasEdison.mp4"></video>
<figcaption class="vidBar4">
<button id='playPause4' class="play4" title="Play/Pause Video"></button>
<button id='fullScreen4' class="on4" title="Enter/Exit Full Screen"></button>
</figcaption>
</figure>
<script>
/*
Toggle Button with classList:
https://developer.mozilla.org/en-US/docs/Web/API/Element/classList
*/
var fullBtn1 = document.getElementById('fullScreen1');
var playBtn1 = document.getElementById('playPause1');
var fullBtn2 = document.getElementById('fullScreen2');
var playBtn2 = document.getElementById('playPause2');
var fullBtn3 = document.getElementById('fullScreen3');
var playBtn3 = document.getElementById('playPause3');
var fullBtn4 = document.getElementById('fullScreen4');
var playBtn4 = document.getElementById('playPause4');
playBtn1.addEventListener('click', function(event) {
var player1 = document.getElementById('vid1');
if(player1.paused) {
playBtn1.classList.remove('play1');
playBtn1.classList.add('pause1');
player1.play();
} else {
playBtn1.classList.add('play1');
playBtn1.classList.remove('pause1');
player1.pause();
}
}, false);
playBtn2.addEventListener('click', function(event) {
var player2 = document.getElementById('vid2');
if(player2.paused) {
playBtn2.classList.remove('play2');
playBtn2.classList.add('pause2');
player2.play();
} else {
playBtn2.classList.add('play2');
playBtn2.classList.remove('pause2');
player2.pause();
}
}, false);
playBtn3.addEventListener('click', function(event) {
var player3 = document.getElementById('vid3');
if(player3.paused) {
playBtn3.classList.remove('play3');
playBtn3.classList.add('pause3');
player3.play();
} else {
playBtn3.classList.add('play3');
playBtn3.classList.remove('pause3');
player3.pause();
}
}, false);
playBtn4.addEventListener('click', function(event) {
var player4 = document.getElementById('vid4');
if(player4.paused) {
playBtn4.classList.remove('play4');
playBtn4.classList.add('pause4');
player4.play();
} else {
playBtn4.classList.add('play4');
playBtn4.classList.remove('pause4');
player4.pause();
}
}, false);
fullBtn1.addEventListener('click', function(event) {
var tgtEle1 = document.querySelector('.vid1');
var onOrOff1 = fullBtn1.classList.contains('on1');
if (onOrOff1) {
enterFS(tgtEle1);
fullBtn1.classList.remove('on1');
fullBtn1.classList.add('off1');
vid1.muted = false;
vid1.currentTime = 0;
} else {
exitFS();
fullBtn1.classList.add('on1');
fullBtn1.classList.remove('off1');
vid1.muted = true;
vid1.currentTime = 0;
}
}, false);
fullBtn2.addEventListener('click', function(event) {
var tgtEle2 = document.querySelector('.vid2');
var onOrOff2 = fullBtn2.classList.contains('on2');
if (onOrOff2) {
enterFS(tgtEle2);
fullBtn2.classList.remove('on2');
fullBtn2.classList.add('off2');
vid2.muted = false;
vid2.currentTime = 0
} else {
exitFS();
fullBtn2.classList.add('on2');
fullBtn2.classList.remove('off2');
vid2.muted = true;
vid2.currentTime = 0
}
}, false);
fullBtn3.addEventListener('click', function(event) {
var tgtEle3 = document.querySelector('.vid3');
var onOrOff3 = fullBtn3.classList.contains('on3');
if (onOrOff3) {
enterFS(tgtEle3);
fullBtn3.classList.remove('on3');
fullBtn3.classList.add('off3');
vid3.muted = false;
vid3.currentTime = 0
} else {
exitFS();
fullBtn3.classList.add('on3');
fullBtn3.classList.remove('off3');
vid3.muted = true;
vid3.currentTime = 0
}
}, false);
fullBtn4.addEventListener('click', function(event) {
var tgtEle4 = document.querySelector('.vid4');
var onOrOff4 = fullBtn4.classList.contains('on4');
if (onOrOff4) {
enterFS(tgtEle4);
fullBtn4.classList.remove('on4');
fullBtn4.classList.add('off4');
vid4.muted = false;
vid4.currentTime = 0
} else {
exitFS();
fullBtn4.classList.add('on4');
fullBtn4.classList.remove('off4');
vid4.muted = true;
vid4.currentTime = 0
}
}, false);
/*
Fullscreen API:
https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API
*/
function enterFS(element) {
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
}
}
function exitFS() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
</script>
</body>
</html>
`
あなたは実際に動的に世代を考慮する必要がありますビデオプレーヤーは、JavaScriptで。あなたのコードは、今は非常に複雑な混乱です、あなたがjavascriptを使ってプレーヤーを生成した場合、それは本当に短くてきれいになります。実際には答えはありませんが、あなたのコードを更新するのがずっと簡単になるでしょう:) –
うん、残念ながら、私はこのプロジェクトをやってもらえなくなるまでにそれをするのに時間がかかるとは思わないでしょう。コードを更新する必要はありませんが、それはその存続期間の間実行されます。私はその混乱を知っていると私はあなたが言及したようなことを行うことを実際にコード化する方法を学習し続けているように。しかし、私は、これを行うには限られた時間しかない、と言ったように。 –