【apicloud】videoPlayer模块(视频播放)demo示例

videoPlayer 封装了视频播放功能(不支持音频播放)。可快进、快退设置播放位置等操作,亦可设置屏幕亮度和系统声音大小。通过监听接口可获取模块上的各种手势操作事件。


点击进入模块详情:http://www.apicloud.com/mod_detail?mdId=35792


点击进入完整源码和图片资源:https://github.com/apicloudcom/VideoPlayer-Example


index.html:

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
        <meta name="format-detection" content="tephone=no,email=no,date=no,address=no">
        <style type="text/css">
            html{ background-color: white; }
            header{ border-bottom: 1px solid #ccc; padding: 25px 0; }
            span {
                padding: 10px 15px;
                margin: 10px;
                display: inline-block;
                background-color: #e8e8e8;
            }
            .hover{ opacity: .4; }
        </style>
    </head>
    <body>
        <header>
            <h1>videoPlayer</h1>
            <mark>
                使用前请详细阅读 文档 使用规则
            </mark>
        </header>
        <span tapmode="hover" onclick="fnPlay()">play</span>
        <span tapmode="hover" onclick="fnOpen()">open</span>
        <span tapmode="hover" onclick="fnSetPath()">setPath</span>
        <span tapmode="hover" onclick="fnStart()">start</span>
        <span tapmode="hover" onclick="fnPause()">pause</span>
        <span tapmode="hover" onclick="fnStop()">stop</span>
        <span tapmode="hover" onclick="fnClose()">close</span>
        <span tapmode="hover" onclick="fnShow()">show</span>
        <span tapmode="hover" onclick="fnHide()">hide</span>
        <span tapmode="hover" onclick="fnFullScreen()">fullScreen</span>
        <span tapmode="hover" onclick="fnCancelFullScreen()">cancelFullScreen</span>
        <span tapmode="hover" onclick="fnForward()">forward</span>
        <span tapmode="hover" onclick="fnRewind()">rewind</span>
        <span tapmode="hover" onclick="fnSeekTo()">seekTo</span>
        <span tapmode="hover" onclick="fnSetBrightness()">setBrightness</span>
        <span tapmode="hover" onclick="fnGetBrightness()">getBrightness</span>
        <span tapmode="hover" onclick="fnSetVolume()">setVolume</span>
        <span tapmode="hover" onclick="fnGetVolume()">getVolume</span>
        <span tapmode="hover" onclick="fnAddEventListener()">addEventListener</span>
        <span tapmode="hover" onclick="fnRemoveEventListener()">removeEventListener</span>
        <span tapmode="hover" onclick="fnSetRect()">setRect</span>

    </body>
</html>
<script type="text/javascript">
    var videoPlayer;
    apiready = function() {
        videoPlayer = api.require('videoPlayer');
    };
    function fnPlay(){
        var videoPlayer = api.require('videoPlayer');
        videoPlayer.play({
            texts: {
                head: {
                    title: '顶部文字'
                }
            },
            styles: {
                head: { 
                    bg: 'rgba(0.5,0.5,0.5,0.7)', 
                    height: 44,
                    titleSize: 16,
                    titleColor: '#fff',
                    backSize: 20,
                    backImg: 'widget://image/back.png', 
                    setSize: 20,
                    setImg: 'widget://image/set.png' 
                },
                
            },
            path: 'http://resource.apicloud.com/video/apicloud3.mp4',
            autoPlay:true
        },function(ret, err) {
             alert(JSON.stringify(ret));
            if (ret) {
                alert(JSON.stringify(ret));
            } else {
                alert(JSON.stringify(err));
            }
        });
    }
    function fnOpen(){
        videoPlayer.open({
            rect:{
                y:30,
                h:150
            },
            autoPlay: true,
            path: 'http://resource.apicloud.com/video/apicloud3.mp4'
        }, function(ret, err){        
            if( ret.status ){
                alert( JSON.stringify( ret ) );
            }else{
                alert( JSON.stringify( err ) );
            }
        });
    }
    function fnSetPath(){
        videoPlayer.setPath({
            path: 'http://resource.apicloud.com/video/apicloud3.mp4'
        });
    }
    function fnStart(){
        videoPlayer.start();
    }
    function fnPause(){
        videoPlayer.pause();
    }
    function fnStop(){
        videoPlayer.stop();
    }
    function fnClose(){
        videoPlayer.close();
    }
    function fnShow(){
        videoPlayer.show();
    }
    function fnHide(){
        videoPlayer.hide();
    }
    function fnFullScreen(){
        videoPlayer.fullScreen();
    }
    function fnCancelFullScreen(){
        videoPlayer.cancelFullScreen();
    }
    function fnForward(){
        videoPlayer.forward({
            seconds: 5
        });
    }
    function fnRewind(){
        videoPlayer.rewind({
            seconds: 5
        });
    }
    function fnSeekTo(){
        videoPlayer.seekTo({
            seconds: 20
        });
    }
    function fnSetBrightness(){
        videoPlayer.setBrightness({
            brightness: 50
        });
    }
    function fnGetBrightness(){
        videoPlayer.getBrightness(function( ret, err ){        
            if( ret ){
                alert( JSON.stringify( ret ) );
            }else{
                alert( JSON.stringify( err ) );
            }
        });
    }
    function fnSetVolume(){
        videoPlayer.setVolume({
            volume: 0.6
        });
    }
    function fnGetVolume(){
        videoPlayer.getVolume(function( ret, err ){        
            if( ret ){
                alert( JSON.stringify( ret ) );
            }else{
                alert( JSON.stringify( err ) );
            }
        });
    }
    function fnAddEventListener(){
        videoPlayer.addEventListener({
            name:'leftUp'
        }, function(ret, err){        
            if( ret ){
                alert( JSON.stringify( ret ) );
            }else{
                alert( JSON.stringify( err ) );
            }
        });
    }
    function fnRemoveEventListener(){
        videoPlayer.removeEventListener({
            name: 'leftUp'
        });
    }
    function fnSetRect(){
        videoPlayer.setRect({
            rect:{
                x: 0,
                y: 0,
                w: 'auto',
                h: 'auto'
            },
            fullscreen: true
        });
    }
</script>


猿教程
请先登录后发表评论
  • 最新评论
  • 总共0条评论