<html>
<head>
<style type="text/css">
#div1, #div2, #div3, #div4, #div5, #div6, #div7, #div8
{float:left; width:320px; height:200px; margin:10px;padding:10px;border:1px solid #aaaaaa;}
body {
-webkit-background-size:cover;
background-image:url(https://i.ytimg.com/vi/V7_91CPqjbI/maxresdefault.jpg);}
</style>
</head>
<body>
<video id="video1" controls="controls" draggable="true" ondragstart="drag(event)" id="drag4">
<source src="http://www.w3school.com.cn/example/html5/mov_bbb.mp4" type="video/mp4">
<source src="http://www.w3school.com.cn/example/html5/mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
<button onclick="getFirstBuffRange()" type="button" draggable="true" ondragstart="drag(event)" id="drag7" />緩衝範圍</button>
<button onclick="getPlaySpeed()" type="button" draggable="true" ondragstart="drag(event)" id="drag1" />默認的播放速度是多少？</button>
<button onclick="setPlaySpeed()" type="button" draggable="true" ondragstart="drag(event)" id="drag2" />慢速播放</button>
<button onclick="setPlaySpeed1()"type="button" draggable="true" ondragstart="drag(event)" id="drag3" />加速播放</button>
<button onclick="enableLoop()" type="button"
draggable="true" ondragstart="drag(event)" id="drag4" />啟用循環</button>
<button onclick="disableLoop()" type="button"
draggable="true" ondragstart="drag(event)" id="drag5" />禁用循環</button>
<button onclick="checkLoop()" type="button"
draggable="true" ondragstart="drag(event)" id="drag6" />檢查循環的狀況</button>
<br />
<br />
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div4" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div5" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div6" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div7" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div8" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</body>
<script type="text/javascript">
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
myVid=document.getElementById("video1");
function getPlaySpeed()
{
alert(myVid.defaultPlaybackRate);
}
function setPlaySpeed()
{
myVid.defaultPlaybackRate=0.5;
myVid.load();
}
function setPlaySpeed1()
{
myVid.defaultPlaybackRate=2;
myVid.load();
}
function enableLoop()
{
myVid.loop=true;
myVid.load();
}
function disableLoop()
{
myVid.loop=false;
myVid.load();
}
function checkLoop()
{
alert(myVid.loop);
}
myVid=document.getElementById("video1");
function getFirstBuffRange()
{
alert("Start: " + myVid.buffered.start(0) + " End: " + myVid.buffered.end(0));
}
</script>
</html>
沒有留言:
張貼留言