H5播放器
Posted zcynine
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了H5播放器相关的知识，希望对你有一定的参考价值。
自定义视频播放器的最好办法就是，隐藏掉原生播放器，把图像输出到canvas上面，然后再在周边加上一系列的控件，控件通过H5的API来控制源，源被控制了，Canvas上的图像也就被控制了。
自定义音频播放器的最好办法原理基本如上，有时间我要写个牛逼的播放器。
测试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>
以上是关于H5播放器的主要内容，如果未能解决你的问题，请参考以下文章