mui哪些事

Mui框架自带VideoPlayer插件的使用

2019-07-11  本文已影响0人  不染事非

示例代码：

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <title>Video Example</title>
    <script type="text/javascript">
    var player = null;
    // 创建视频播放控件
    function createVideoPlayer() {
        if(!player){
            player = plus.video.createVideoPlayer('videoplayer', {
                'src':'你的视频链接',
                'top':'500px',
                'left':'0px',
                'width': '100%',
                'height': '200px',
                'initial-time':'59.547001'
            });
        plus.webview.currentWebview().append(player);
            // 监听开始播放事件
        player.addEventListener('play', function(e){
            plus.nativeUI.alert('Video play');
        }, false)
        // 监听播放进度更新事件
        player.addEventListener('timeupdate', function(e){
            console.log(JSON.stringify(e));
        }, false);
        // 监听播放结束事件
        player.addEventListener('ended', function(e){
            plus.nativeUI.alert('Video ended');
        }, false);
        }
    }
    document.addEventListener('plusready', createVideoPlayer, false);
    </script>
    </head>
    <body style="margin:0;padding:0;text-align:center;">
        视频播放控件
        <br/><br/>
        <div id="video" style="width:100%;height:300px;background-color:#000000;margin:auto"></div>
    </body>
 
</html>

用Hbuilder运行这个页面，就可以监听到的播放进度更新事件和播放进度结束事件。视频播放过程中，会有一个总时长和已观看时长。我们拿到已观看时长，传参。在用户下次进来时，把这个已观看时长的num值，赋值给initial-time即可,这样用户就可以继续看下去。
initial-time是VideoPlayer的一个参数。此外VideoPlayer还支持很多其他的参数，如我的测试中用到的top、left、width、height。

上一篇下一篇

猜你喜欢

热点阅读