H5播放器
2016-06-01 23:22
465 查看
自定义视频播放器的最好办法就是,隐藏掉原生播放器,把图像输出到canvas上面,然后再在周边加上一系列的控件,控件通过H5的API来控制源,源被控制了,Canvas上的图像也就被控制了。
自定义音频播放器的最好办法原理基本如上,有时间我要写个牛逼的播放器。
测试Demo
自定义音频播放器的最好办法原理基本如上,有时间我要写个牛逼的播放器。
测试Demo
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"> <title>Media</title> </head> <body> <audio controls src="./resource/Over the horizon.mp3" id="samsung"></audio> <video controls id="butterfly"> <source src="./resource/butterfly.mp4" type="video/mp4"></source> <source src="./resource/butterfly.ogg" type="video/ogg"></source> Resource Failed! </video> <canvas id="shadow"></canvas> <script type="text/javascript"> var samsung = document.getElementById('samsung'); var butterfly = document.getElementById('butterfly'); var shadow = document.getElementById('shadow'); var env = shadow.getContext('2d'); console.log("currentTime:" + samsung.currentTime); console.log("duration:" + samsung.duration); console.log("volume:" + samsung.volume); console.log("paused:" + samsung.paused); console.log("ended:" + samsung.ended); console.log("error:" + samsung.error); console.log("currentSrc:" + samsung.currentSrc); butterfly.poster = './img/rabbit.jpg'; shadow.width = butterfly.clientWidth; shadow.height = butterfly.clientHeight; setInterval(function(){ env.drawImage(butterfly, 0, 0); },30); </script> </body> </html>
相关文章推荐
- 使用MUI/html5plus集成微信支付需要注意的几点问题
- 【HTML5/CSS/JS】A list of Font Awesome icons and their CSS content values(一)
- HTML5 Canvas 绘制椭圆与椭圆弧的实现
- HTML5 Web Workers
- HTML 5定稿一周年!你必须要重新认识HTML5了
- ccah-500 第13题Which three basic configuration parameters must you set to migrate
- web HTML5 调用摄像头的代码
- ccah-500 第11题What does CDH packaging do on install to facilitate Kerberos security setup
- HTML5 LocalStorage 本地存储
- Html5学习笔记(一)初认识html5
- 检测浏览器对HTML5属性的支持度
- 关于老式浏览器兼容HTML5和CSS3的问题
- 这是一个盗版和强盗的社会
- HTML5、formData移动浏览器上传图片
- Html5 Video 实现方案
- HTML5 LocalStorage 本地存储
- 应用之星:H5制作又出一利器,分分钟刷爆朋友圈
- HTML标准事件(包含HTML5)
- HTML5的这些api你知道吗?
- html5与html4的区别,如何一眼区分