HTML5——播放器

时间：2022-09-30 10:26:12

有了H5的Video，妈妈再也不用担心我没安Flash插件了

根据Video提供的方法和属性，简单练习了一下，不说废话，直接上图片和代码

HTML5——播放器

<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>

HTML5——播放器的更多相关文章

  1. 7款超具个性的HTML5播放器

    这篇文章我们要分享一些很有个性的HTML5音乐播放器和视频播放器,它们都具有播放器的大部分功能,并以HTML5和JavaScript实现.这些HTML5播放器有着非常漂亮的外观,很多你都无需自己重新定 ...

  2. HTML5 播放器

    之前一个前端群里 大牛 做了一个自适应的HMLT5播放器 最近根据其思路做了一个相对单一移动端的demo,demo用的图片和歌曲json的数据设计 都是群里大牛做的,在这谢谢~: 同时借鉴的几篇文章: ...

  3. HTML5播放器 MediaElement&period;js 使用方法

    目前已经有很多html5播放器可以使用,使用html5播放器可以轻松的在页面中插入媒体视频,从而使我们的web页面变得更加丰富多彩,所以今 天向大家推荐一款非常优秀的html5播放器MediaElem ...

  4. HTML5播放器实例

    鉴于html5Audio and video的使用,设计了一个自定义风格的播放器,除实现一些基本的默认功能之外,还实现了一些高级功能. 具体功能如下: 实现播放暂停按钮 实现静音按钮 实现音量调节滑动 ...

  5. &period;NET MVC对接POLYV——HTML5播放器播放加密视频

    官方参考文档:http://dev.polyv.net/2017/videoproduct/v-playerapi/html5player/html5-docs/ 1.上传视频之前根据自己需要对所上传 ...

  6. HTML5播放器FlowPlayer的极简风格效果

    在线演示 本地下载 使用Flowplayer生成的极简风格的播放器效果.

  7. CKPlayer 只调用HTML5播放器时全屏问题 这只是Chrome浏览器的渲染bug

    如题,在系统中使用CKPlayer播放器,一切顺利,偶然发现没有全屏按钮, 正常的全屏按钮是这样的: 经过一步步调试,发现问题出在iframe, 当视频页面在iframe内时,全屏按钮不显示了,这个和 ...

  8. wap html5播放器和直播开发小结

    此文已由作者吴家联授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 去年年中的时候,借着产品改版的机会,将之前的h5播放器好好整理重构了一番.之前的h5播放器较为简陋,有几个大 ...

  9. html5播放器制作小结

    链接:http://snowinmay.net/6rooms/html/music.php 9月份前的版本: 播放,暂停,点赞,播放状态显示. 9.2版本: 下载歌曲,静音,时间倒计时(点击暂停时倒计 ...

随机推荐

  1. 基于spring的文件上传--单文件上传

    Spring配置文件 <bean id="multipartResolver" class="org.springframework.web.multipart.c ...

  2. C&num;经典面试题 C&num; 中 Struct 与 Class 的区别，以及两者的适用场合

    在一家公司面试时,第一个问题就是问到这个 转载 文章 http://www.cnblogs.com/waitrabbit/archive/2008/05/18/1202064.html  来解释此问题 ...

  3. Flex性能优化常用手法总结 转

    转自:http://bbs.51aspx.com/showtopic-43693.html 随着Flex越来越多的被人们所熟知,越来越多的互联网也开始了RIA应用.众所周知,目前国内的宽带应用并不是像 ...

  4. linux下ssh免密登陆

    如果 有A.B两台主机: 要实现的效果: A主机ssh登录B主机无需输入password: 加密方式选 rsa|dsa均能够.默认rsa 做法: 1.登录A主机 2.ssh-keygen -t [rs ...

  5. 14-C语言宏

    目录: 一.宏定义 二.#x,##x使用和预定义宏 三.宏的高级使用(条件编译) 回到顶部 一.宏定义 1 宏是常用的预处理功能之一,是在编译之前进行宏替换,即将宏名替换成所定义的宏体. 2 优点:可 ...

  6. 开源NetWorkSocket通讯组件

    开源NetWorkSocket通讯组件   前言 在<化茧成蝶,开源NetWorkSocket通讯组件>发表之后,收到大家很多个star,在此感谢!更可贵的是,一些网友提出了许多好建议,经 ...

  7. Java第1次实验提纲&lpar;基本概念与引入PTA&plus;Git&rpar;

    0. 控制台下编译.运行 在Notepad++编写Java程序 学会使用控制台,javac.java 学会使用Notepad++ 参考资料: 控制台-cmd应用基础 扫盲教程 使用命令行编译并运行ja ...

  8. iOS应用启动时间

    转自:iOS 知识小集 如果我们想知道程序启动的时间,则可以在工程的scheme中添加环境变量DYLD_PRINT_STATISTICS,如图1所示.这样在调试时,可以在控制台打印出程序启动过程中各个 ...

  9. underscore源码阅读

    1:函数式编程初探 2:if(obj.length === +obj.length)的判断 3:JS对象属性用中括号表示的优点在于可以用变量表示属性 4:callee,caller---JS高级程序设 ...

  10. &lbrack;NOIP2017赛前复习第二期&rsqb;复赛考试技巧与模版-普及组

    考试技巧 1.拿到考卷首先通看题目,按自己感觉的难度排序(普及一般是1-2-3-4了~还是相信出题人不会坑我们的2333) 2.一般来说,普及组前两道题比较简单(大水题啊233~),但是通常坑很多,例 ...

相关文章