移动端app视频播放组件MuiPlayer初学习
近日在开发移动端app时，发现h5的video标签竟然无法播放视频，无奈。经多方查阅，找到一款简单易用的适用于移动端同时也适用于PC端的视频播放插件，一下是学习过程的一个小Demo：
<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <link href="../css/mui.min.css" rel="stylesheet" /> <link href="../css/mui.player.min.css" rel="stylesheet" /> </head> <body> <header class="mui-bar mui-bar-nav" style="background: #ffffff; box-shadow: none;"> <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> <h1 class="mui-title">MuiPlayer视频播放插件</h1> </header> <div class="mui-content"> <div id="videoBox"></div> </div> </body> <script src="../js/mui.min.js"></script> <script src="../js/mui.player.min.js"></script> <script type="text/javascript"> var duration = 0; // 视频总时长 mui.init(); var mp = new MuiPlayer({ container: '#videoBox', title: '视频标题', src: 'http://localhost:8015/upload/video/v1.mp4' }); // 监听播放器已创建完成 mp.on('ready',function(event) { console.log('ready --- ') console.log(event); console.log('\n') // 视频播放监听 document.querySelector("._play svg").addEventListener("tap", function() { console.log('开始播放'); console.log('paly dispaly -> ' + document.querySelector('._play').style.display); //block console.log('pause display -> ' + document.querySelector('._pause').style.display); //none }, false); // 视频暂停监听 document.querySelector("._pause svg").addEventListener("tap", function() { console.log('暂停播放'); var progressPlay = document.querySelector('#progress-play').style.width; console.log('paly dispaly -> ' + document.querySelector('._play').style.display); //none console.log('pause display -> ' + document.querySelector('._pause').style.display); //block console.log('播放进度：' + progressPlay); //3.72094% console.log('播放进度：' + (parseFloat(progressPlay) / 100 * duration)); //2.1632056784s }, false); }); // 当视频时长已更改时触发，只有当时长大于1时发生，单位为秒（s） 可用于获取视频总时长 mp.on('duration-change',function(event) { duration = event.duration }); // 当用户在视频寻址时触发 mp.on('seek-progress',function(event) { console.log('seek-progress --- ') console.log(event); console.log('progress paly -> ' + document.querySelector('#progress-play').style.width) console.log('\n') }); </script> </html>
其中 mui.player.min.css 和 mui.player.min.js 已上传 gitee传送门 有需要的可移步下载！
这里只是简单的小应用，更多有趣的功能请移步 mui-player官网 进行查阅学习！
每天进步一点点，点滴记录，积少成多。
以此做个记录，
如有不足之处还望多多留言指教！
