-1
HTML5でビデオを追加する方法を学ぶために、単純なHTMLファイルを作成しました。私はyoutube上の古い指示に従ったが、私は解決策を働かせることができなかった。フルスクリーンを追加するまで、すべてのコードが機能しましたtogglefullscreenをHTML5ビデオで使用するにはどうすればよいですか？
どこでエラーが発生しましたか？私は別のスペル、Mozillaサイトからの提案付き大文字、このフォーラムおよび検索エンジンが指し示すことができる他のトップ結果を試しました。ここで
今
<html>
<head>
<style type ="text/css">
div#video_box{width:600px; background:black; margin:0px auto;}
div#video_control{ background:black; padding:10px; opacity:50%;}
input#soundslider{ width:80px}
</style>
<script>
var vid, playbutton, seekbar, seekslider, curtimetext, durtimetext, soundslider, fullscreenbutton;
function initializePlayer() {
vid = document.getElementById("mi_vid");
playbutton = document.getElementById("playpausebutton");
seekslider = document.getElementById("seekslider");
curtimetext = document.getElementById("curtimetext");
durtimetext = document.getElementById("durtimetext");
soundslider = document.getElementById("soundslider");
fullscreenbutton = document.getElementByID("fullscreenbutton");
// event listeners
playbutton.addEventListener("click",playPause,false);
seekslider.addEventListener("change",vidSeek,false);
vid.addEventListener("timeupdate",seektimeupdate,false);
soundslider.addEventListener("change",setvolume,false);
fullscreenbutton.addEventListener("click",toggleFullScreen,false);
}
window.onload= initializePlayer;
function playPause() {
if(vid.paused){
vid.play();
playbutton.innerHTML = "Pause";
}
else {
vid.pause();
playbutton.innerHTML = "Play";
}
}
function vidSeek() {
var seekto = vid.duration * (seekslider.value/100);
vid.currentTime = seekto;
}
function seektimeupdate() {
var nt = vid.currentTime * (100 /vid.duration);
seekslider.value = nt;
var curmins = Math.floor(vid.currentTime /60);
var cursecs = Math.floor(vid.currentTime - curmins *60);
var durmins = Math.floor(vid.duration /60);
var dursecs = Math.round(vid.duration - durmins *60);
if(cursecs <10) {
cursecs = "0"+cursecs;
}
if(dursecs <10) {
dursecs = "0"+dursecs;
}
curtimetext.innerHTML = curmins+":"+cursecs;
durtimetext.innerHTML = durmins+":"+dursecs;
}
function setvolume() {
vid.volume = soundslider.value /100;
}
function toggleFullScreen() {
if (vid.requestFullScreen){
vid.requestFullscreen();
}
else if (vid.mozRequestFullScreen) {
vid.mozRequestFullScreen();
}
else if (vid.mozRequestFullScreen) {
vid.mozRequestFullscreen();
}
else if (vid.webkitRequestFullscreen) {
vid.webkitRequestFullscreen();
}
else if (vid.msRequestFullscreen) {
vid.msRequestFullscreen();
}
}
</script>
</head>
<body>
<div id="video_box">
<video id="mi_vid" controls="controls" width="600" height="370"><source src="/home/nomouseisdead/video.mp4">
</video>
<div id="video_control">
<button id="playpausebutton">Pause</button>
<button id="fullscreenbutton">full</button>
<input id="seekslider" type="range" min="0" max="100" value="0" step="1">
<span id="curtimetext"></span>/<span id="durtimetext"></span>
<input id="soundslider" type="range" min="0" max="100" value="100" step="1">
</div>
</div>
</body>
</html>
フルスクリーンサポートは、プレイヤーに少しバグがあります。このhttps://github.com/sindresorhus/screenfull.jsを試してみてください。 –
この質問は、もはや再現できない問題やシンプルな誤字によって引き起こされたものです._ – halfer
@nomouseisdead：タイトルの「正しいコード2017」は何を意味していますか？私はほとんどの人がそれで混乱すると思います、あなたは明確にすることができますか？ – halfer