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播放器的主要内容,如果未能解决你的问题,请参考以下文章

关于H5视频自动播放问题

极品代码一般人我不告诉他,手机端h5播放时不自动全屏代码

h5-自定义视屏播放器

苹果手机微信浏览器H5播放器无法打开即播放音乐解决方案

为啥微信测试H5视频可以播放,上线后播放不了

解决h5的video标签,androidipad客户端播放正常,iphone客户端无法播放