HTML5——播放器
有了H5的Video,妈妈再也不用担心我没安Flash插件了
根据Video提供的方法和属性,简单练习了一下,不说废话,直接上图片和代码
<html>
<head>
<title>一明播放器</title>
<style type="text/css">
*{
margin:0px;padding:0px;
}
#v1{
width:400px;
}
#divVideo{
width:400px;height:340px;border:1px solid black;margin:50px auto;
}
input[type="button"]{
width:70px;height:30px;
}
input:first-of-type{
background-color:blue;
}
input:nth-of-type(2){
background-color:red;
}
input:nth-of-type(3){
background-color:pink;
}
</style>
</head>
<body>
<div id="divVideo">
<video controls id="v1">
<source src="Intermission-Walk-in_512kb.mp4"/><br/>
</video>
<input type="button" value="暂停" id="btnPause"/>
<input type="button" value="开始" id="btnPlay"/>
<input type="button" value="重播" id="btnLoop"/>
<input type="button" value="静音" id="btnMuted"/>
</div>
</body>
</html>
<script type="text/javascript">
var btnPause=document.getElementById("btnPause");
var btnPlay=document.getElementById("btnPlay");
var btnLoop=document.getElementById("btnLoop");
var btnMuted=document.getElementById("btnMuted");
var v1=document.getElementById("v1");
v1.poster="1.jpg";
btnPause.onclick=function(){
v1.pause();
}
btnPlay.onclick=function(){
v1.play();
}
btnLoop.onclick=function(){
v1.load();
}
btnMuted.onclick=function(){
v1.muted=!v1.muted;
}
</script>
最新文章
- JavaWeb学习总结(五十二)——使用JavaMail创建邮件和发送邮件
- DB2修改表字段
- git操作回顾:
- spring事务管理学习
- HPROF学习
- gc学习(转)
- JavaScriptConvert.SerializeObject转换出错
- Nginx Access Log日志统计分析常用命令
- Fast Walsh-Hadamard Transform——快速沃尔什变换
- Tomcat中的Context.xml的<;Loader delegate=";true";/>;
- springboot~mogodb多条件拼接
- codeforces675D
- 使用VSTS的Git进行版本控制(七)——管理仓库
- scrapy之基础概念与用法
- MATLAB 显示输出数据的三种方式
- 大数乘法java版
- Java结束线程的三种方法(爱奇艺面试)
- java官网门户源码 SSM框架 自适应-响应式 freemarker 静态模版引擎
- struts2-Action配置-通配符-DMI
- 【Laravel】Mac下玩转Laravel