您的位置:首页 > Web前端 > HTML5

H5播放器

2016-06-01 23:22 465 查看
自定义视频播放器的最好办法就是,隐藏掉原生播放器,把图像输出到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>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: