2019.04 網頁影片練習－驢子的生活日記

https://drive.google.com/open?id=1wJ_HShSs54nILF2NW-Wx0LsbldCEXyEs

需要用到的檔案和完成檔案如上(使用W3C練習檔案更改)

內容是客製化影片控制選項

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body> 
 
<video id="myvideo" width="400" src="mov_bbb.mp4" loop>
<!-- <source type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video. -->
</video>
<br>
<input id="videourl" type="text" size="70" />
<br>
<input onclick="PlayOrPause()" id="playbutton" type="button" value="play"/>
<input onclick="fullscreen()" type="button" value="fullscreen"/>
<div>
<sapn id="timedisplay"></sapn>
<sapn id="volumdisplay"></sapn>
</div>
<div>
<input onclick="addvoulme()" type="button" value="+"/>
<input onclick="subvoulme()" type="button" value="-"/>
</div>
<input onclick="current()" id="progressSlider" type="range" min="0" value="0"/>
<p>
Video courtesy of 
<a href="https://www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a>.
</p>
<script>
var myvideo=document.getElementById("myvideo");
var videourl=document.getElementById("videourl");
var playbutton=document.getElementById("playbutton");
var timedisplay=document.getElementById("timedisplay");
var volumdisplay=document.getElementById("volumdisplay");
var progressSlider=document.getElementById("progressSlider");
</script>
<script>
function current()
{
myvideo.currentTime=progressSlider.value;
}
function updateprogress()
{
timedisplay.innerHTML=Math.floor(myvideo.currentTime)+" / "+Math.floor(myvideo.duration);
progressSlider.value=myvideo.currentTime;
}
function PlayOrPause()
{
videourl.value=myvideo.src;
if (myvideo.paused)
{
myvideo.play();
playbutton.value="pause";
}else
{
myvideo.pause();
playbutton.value="play";
}
progressSlider.max=myvideo.duration;
 
volumdisplay.innerHTML="音量:" + myvideo.volume.toFixed(2);
 
myvideo.addEventListener("timeupdate",updateprogress);
}
function fullscreen()
{
myvideo.webkitEnterFullScreen();
}
function addvoulme()
{
if(myvideo.volume==1)
{
}else if(myvideo.volume>0.9)
{
myvideo.volume=1;
}else{
myvideo.volume+=0.1;
}
volumdisplay.innerHTML="音量:" + myvideo.volume.toFixed(2);
}
function subvoulme()
{
if(myvideo.volume==0)
{
}else if(myvideo.volume<0.1)
{
myvideo.volume=0;
}else{
myvideo.volume-=0.1;
}
volumdisplay.innerHTML="音量:" + myvideo.volume.toFixed(2);
}
</script>
</body> 
</html>