代码如下
<!DOCTYPE html
>
<html
>
<head
>
<meta charset
="utf-8" />
<title
></title
>
<style type
="text/css">
.{
font
-family
: "微软雅黑";
}
#box
{
margin
-left
: 500px
;
}
li
{
list
-style
: none
;
width
: 80px
;
height
: 30px
;
float
: left
;
}
ul
{
margin
-left
: 50px
;
}
input
{
background
-color
: chartreuse
;
}
</style
>
</head
>
<body
>
<div id
="box">
<section
>
<!--<audio controls
="controls" autoplay
="autoplay" loop
="loop">
<source src
="media/Truth of the Legend.ogg" type
="audio/ogg"></source
>
</audio
>-->
<video controls id
="video" ontimeupdate
="update()" onprogress
="cs()"><!--autoplay loop onmousemove
="this.play()" onmouseout
="this.pause()"-->
<source src
="media/movie.mp4" type
="video/mp4"></source
>
</video
>
<ul
>
<span id
="s2"></span
>
<li
><input type
="button" id
="pp" value
="播放/暂停" onclick
="playorpause()" ></li
>
<li
><input type
="button" onclick
="big()" value
="放大"></li
>
<li
><input type
="button" onclick
="sx()" value
="缩小"></li
>
<li
><input type
="button" onclick
="jy()" value
="静音"></li
>
<li
><input type
="button" onclick
="up()" value
="增加音量" id
="bp" ></li
>
<li
><input type
="button" id
="bd" onclick
="vd()" value
="减小音量"></li
>
<li
><input type
="button" id
="sy" onclick
="yl()" value
="音量"></li
><br
/>
<span id
="result"></span
><br
/>
<input id
="rg" type
="range"min
="0" max
="100" value
="100" onchange
="getvalue()" />
<span id
="nb"></span
>
</ul
>
</section
>
</div
>
<script type
="text/javascript">
var v
=document
.getElementById("video");
function playorpause(){
if(v
.paused
){
v
.play();
document
.getElementById("pp").value
="暂停";
}
else{
v
.pause();
document
.getElementById("pp").value
="播放";
}
}
function big()
{
v
.width
=1000;
}
function jy()
{
if(v
.muted
){
v
.muted
=false;
}else{
v
.muted
=true;
}
}
function yl()
{
v
.volume
=0.2;
}
function sx()
{
v
.width
=200;
}
function up()
{
if(v
.volume
<1)
{
video
.volume
+=0.1;
if(video
.volume
>0)
{
video
.muted
=false;
}
}
volume
=video
.volume
;
}
function vd()
{
if(v
.volume
>0)
{
video
.volume
-=0.1;
if(video
.volume
==0)
{
video
.muted
=true;
}
}
volume
=video
.volume
;
}
function update()
{
var r
=document
.getElementById("result");
var d
=v
.duration
;
var cur
=v
.currentTime
;
r
.innerHTML
=Math
.floor(cur
)+"/"+Math
.floor(d
)+"秒";
}
function getvalue()
{
var value
=document
.getElementById("rg").value
;
var nb
=document
.getElementById("nb");
nb
.innerHTML
=value
;
video
.volume
=value
/100;
}
function cs()
{
var video
=document
.getElementById("video");
var state
=video
.networkState
;
var result
=document
.getElementById("result3");
if(state
=="0")
{
s2
.innerHTML
="媒体信息正在初始化";
}
else if(state
=="1")
{
s2
.innerHTML
="媒体信息加载完毕，请单击播放";
}
else if(state
=="2")
{
s2
.innerHTML
="正在加载媒体信息";
}
else
{
s2
.innerHTML
="媒体加载失败";
}
}
</script
>
</body
>
</html
>
效果（样式不是很美观）
但是能通过原生的js开始控制并且写入样式
