轻松实现一个简单H5播放器

一、Flash 与 H5

 Flash被h5取代的方面：1. 动画                 <canvas></canvas>   + 定时器2. 音频和视频            <video></video>    <audio></audio>3. 绘图                 <canvas></canvas>4. 统计图表              <canvas></canvas>   <svg></svg>5. 客户端数据存储            webstorage

二、H5多媒体属性与API

 视频格式：ogg,mp4,webm音频格式：mp3,wav,ogg 用于播放视频，默认的300*1501. 属性：autoplay:自动播放     自动播放在浏览器中会被禁用，但是在静音状态下可以自动播放muted : 设置静音controls : 控件      不同浏览器显示出来的功能不一样loop  : 是否循环播放poster : 视频播放前的预览图片   谷歌中一闪而过preload : 视屏预加载方案    auto : 视频的宽高  时长  第一帧内容  默认 有一定的缓冲时长 metadata : 视频的宽高  时长  第一帧内容 none : 不预加载任何内容2. js控制的：    ended : 是否播放到结束paused : 当前是否处于暂停状态currentTime : 播放到的当前时间duration : 影片的总时长muted3. video支持的方法play()  开始播放pause()  暂停播放

三、H5多媒体进度条

     1. ontimeupdate 事件在视频/音频（audio/video）当前的播放位置发送改变时触发。2. 该事件通过以下方式调用：播放视频/音频（audio/video）重新定位视频/音频（audio/video）的播放位置。3. 提示：   该事件通常与 Video 对象的 currentTime 属性一起使用， 该属性返回视频/音频（audio/video）的当前播放位置。4. ontimeupdate 事件监听:          duration : 总时长currentTime ： 动态时长v1.currentTime / v1.duration).toFixed(3) * 100;      // 当前市场占总时长百分比

四、实例

（1）效果展示开始状态 —— pause

（1）效果展示播放状态 —— play

（2）实现方式

 <div class="main"><video id="v1" src="birds.mp4" preload="auto" preload="auto"></video><div id="mark"></div><img src="clothes04.jpg" id="img2"><img src="play02.png" id="img1"><img src="play.png" id="btn2"><div id="Progressbar"><div id="lvdong"></div><span id="bftime"></span></div></div><script type="text/javascript">var img1 = document.getElementById("img1");var img2 = document.getElementById("img2");var btn2 = document.getElementById("btn2");var mark = document.getElementById("mark");var bftime = document.getElementById("bftime");var lvdong = document.getElementById("lvdong");var v1 = document.getElementById("v1");var main = document.getElementsByClassName("main")[0];//分秒取整，转换时间格式例如00:00/00:10function timer(cctime){var min = parseInt(cctime / 60);var sec = parseInt(cctime % 60);min = min >= 10 ? min : '0' + min; sec = sec >= 10 ? sec : '0' + sec;return min+':'+sec;}//未播放获取总时长v1.oncanplay = function(){bftime.innerText = "00:00" + '/' + timer(v1.duration);} //实时获取播放时长v1.ontimeupdate = function(){bftime.innerText = timer(v1.currentTime) + '/' + timer(v1.duration);var bfb = ( v1.currentTime / v1.duration).toFixed(3)*100;lvdong.style.width = bfb + '%';if(v1.ended){v1.pause();img1.src = "play02.png";btn2.src = "play.png";mark.style.display = 'block';img2.style.display = 'block';}}  img1.onclick = function (){if(v1.paused){v1.play();img1.src = "pause02.png";btn2.src = "pause.png";mark.style.display = 'NONE';img2.style.display = 'NONE';}else {v1.pause();img1.src = "play02.png";btn2.src = "play.png";mark.style.display = 'block';img2.style.display = 'block';}}btn2.onclick = img1.onclick;main.onmouseenter = function(){img1.style.display = 'block';btn2.style.display = "block";}main.onmouseleave = function(){img1.style.display = 'none'; btn2.style.display = "none";}</script>

~~~~~~~~~~~~~~~~~~~ END ~~~~~~~~~~~~~~~~~~~

轻松实现一个简单H5播放器相关推荐

利用MFC调用libvlc.dll作一个简单的播放器
简单介绍MFC调用libvlc.dll作一个简单的播放器,抛砖引玉,各位VC++达人继续深入研究,Jeremiah对VC++确实不太感兴趣,所以就不做太深入的研究了. 2009.10.29修改:加入c ...
java计算机毕业设计vue开发一个简单音乐播放器（附源码、数据库）
java计算机毕业设计vue开发一个简单音乐播放器(附源码.数据库) 项目运行环境配置: Jdk1.8 + Tomcat8.5 + Mysql + HBuilderX(Webstorm也行)+ Ec ...
java计算机毕业设计vue开发一个简单音乐播放器源码+mysql数据库+系统+lw文档+部署
java计算机毕业设计vue开发一个简单音乐播放器源码+mysql数据库+系统+lw文档+部署 java计算机毕业设计vue开发一个简单音乐播放器源码+mysql数据库+系统+lw文档+部署本源码技 ...
java计算机毕业设计vue开发一个简单音乐播放器MyBatis+系统+LW文档+源码+调试部署
java计算机毕业设计vue开发一个简单音乐播放器MyBatis+系统+LW文档+源码+调试部署 java计算机毕业设计vue开发一个简单音乐播放器MyBatis+系统+LW文档+源码+调试部署本源 ...
计算机毕业设计Javavue开发一个简单音乐播放器(源码+系统+mysql数据库+lw文档）
计算机毕业设计Javavue开发一个简单音乐播放器(源码+系统+mysql数据库+lw文档) 计算机毕业设计Javavue开发一个简单音乐播放器(源码+系统+mysql数据库+lw文档) 本源码技术栈 ...
JAVA毕业设计vue开发一个简单音乐播放器计算机源码+lw文档+系统+调试部署+数据库
JAVA毕业设计vue开发一个简单音乐播放器计算机源码+lw文档+系统+调试部署+数据库 JAVA毕业设计vue开发一个简单音乐播放器计算机源码+lw文档+系统+调试部署+数据库本源码技术栈: 项目 ...
基于JAVAvue开发一个简单音乐播放器计算机毕业设计源码+数据库+lw文档+系统+部署
基于JAVAvue开发一个简单音乐播放器计算机毕业设计源码+数据库+lw文档+系统+部署基于JAVAvue开发一个简单音乐播放器计算机毕业设计源码+数据库+lw文档+系统+部署本源码技术栈: 项目 ...
可视化程序设计基础（三）——一个简单的播放器（并不）
本次的作业是制作一个简单的播放器,功能仅限于播放视频和音频,虽说是简单的播放器,但其中还是有很多细节需要注意的. 代码发布在:https://github.com/cui-jia-hua/mediap ...
[SimplePlayer] 实现一个简单的播放器
简单的播放器需要实现一个最基本的功能:播放视频文件. 实现这个功能需要包含以下几个步骤: 从视频文件中提取视频图像在屏幕上显示视频图像视频帧的同步,也就是保证视频图像在合适的时间在屏幕上显示从视 ...

轻松实现一个简单H5播放器

一、Flash 与 H5

二、H5多媒体属性与API

三、H5多媒体进度条

四、实例

轻松实现一个简单H5播放器相关推荐

最新文章

热门文章