【apicloud】视频播放器实现教程

前言,为了在apicloud项目中实现视频播放功能,先后做了不少尝试最早简单引入了video.js发现ios效果不佳转战了apicloud内部模块,先后使用了moviePlayer、videoPlayer等模块,安卓兼容性并不乐观部分系统型号存在视频卡死问题。试了不少模块,且顾及需要倍速等需求最后还是回头重拾video.js。(最后附有demo下载地址。)


个人经验:横屏播放不要去纠结全屏问题,设置监听事件,把屏幕改为横屏重新设置播放器宽度高度的做法最佳,自带的全屏兼容不好。



言归正传开始正事:


第一步:video.js包下载(以下代码示例使用的都是个人使用版)

  1. 个人使用版:https://pan.baidu.com/s/16kVFb_8aqtSpm7Vf1aWrog   提取码:rpp8  (网上找的版本,有针对APP做一些样式优化)

  2. 官方下载版:https://videojs.com/getting-started/


第二步:文件引入

    路径只是示范,具体的根据个人项目需求自行更改

    CSS:

    <link rel="stylesheet" type="text/css" href="../plugins/videojs/css/iconfont.css" />

    <link rel="stylesheet" type="text/css" href="../plugins/videojs/css/video-js.css" />


    JavaScript:

    <script type="text/javascript" src="../plugins/videojs/js/video.min.js"></script>


第三步:初始化

页面初始化直接载入(这部分直接引用demo):

HTML:

<video id="video" webkit-playsinline="true" playsinline="true" class="video-js vjs-default-skin" controls preload="none" 
      poster="http://video-js.zencoder.com/oceans-clip.png"
      data-setup="{}">
    <source src="http://视频地址格式1.mp4" type='video/mp4' />
    <source src="http://视频地址格式2.webm" type='video/webm' />
    <source src="http://视频地址格式3.ogv" type='video/ogg' />
</video>

video标签中的poster为设置视频封面、source提供三种不同格式的视频源、可根据项目需求自行更改删除。


JS:

<script type="text/javascript">
    var myPlayer = videojs('video');
    videojs("video").ready(function(){
        var myPlayer = this;
        myPlayer.play();
    });
</script>



后期ajax获取接口数据载入(个人使用方法)(实现断点播放、倍速、自动横屏):

HTML:

    <video id="video" webkit-playsinline="true" playsinline="true" class="video-js vjs-default-skin " controls poster="../image/video-backgroud-img2.png">
        <!-- <source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4' /> -->
        <p class="vjs-no-js">播放视频需要启用 JavaScript,推荐使用支持HTML5的浏览器访问。</p>
    </video>


JS:

        myPlayer = videojs("#video", {
            "techOrder": ["html5"],
            "autoplay": true,
            "preload": "auto",
            'playbackRates': [0.75, 1, 1.25, 1.5, 1.75, 2],
            "inactivityTimeout": 1000 * 5,
            "controlBar": {
                remainingTimeDisplay: false, //隐藏 TimeDisplay
                volumePanel: true, //音量是否显示
                captionsButton: false,
                chaptersButton: false,
                liveDisplay: false,
                playbackRateMenuButton: true,
                subtitlesButton: false,
                fullscreenToggle: false 
            },
            plugins: {
                header: {
                    seek: 0.4,
                    title: _title,
                    back: back,
                    touchmove: function(type) {
                        switch (type) {
                            case 'left':
                                this.player.currentTime(this.player.currentTime() - this.options.seek*4)
                                break;
                            case 'right':
                                this.player.currentTime(this.player.currentTime() + this.options.seek*4)
                                break;
                            default:
                                break;
                        }
                    }
                }
            }
        }, function() {
            //设置全屏模式
            hh=api.winHeight;
            ww=api.winWidth;

            var rotateBtn = this.controlBar.addChild('button');
            var _thisVideo = this;
            if(hh>ww){
                this.width(hh);
                this.height(ww);
            }else{
                this.width(ww);
                this.height(hh);
            }
            //设置视频路径
            this.src(_url);
            //恢复观看记录
            this.on('loadeddata', function() {
                var _whereYouAt = $api.getStorage('video_'+_urlkey);
                if(_whereYouAt != 0 && !!_whereYouAt){
                    api.confirm({
                        title: '是否恢复上一次的观看记录',
                        msg: '您之前已经有观看过该视频',
                        buttons: ['确定', '取消']
                    }, function(ret, err) {
                        var _index = ret.buttonIndex;
                        if(_index == 1){
                            _thisVideo.currentTime(_whereYouAt);
                        }else{
                            $api.setStorage('video_'+_urlkey,0);
                        }
                    });
                }
                
            })
            //处理 部分安卓手机 无法退出全屏问题
            this.on('error', function(a) {
                    api.confirm({
                        title: '提示',
                        msg: '视频载入超时,请重新尝试。',
                        buttons: ['确定', '取消']
                    }, function(ret, err) {
                        closeWin();
                    });
                })
            //处理 部分安卓手机 无法进入全屏问题
            this.on('requestFullscreen', function() {
                    activeType = 'requestFullscreen'; //更新一下状态
                    onFullScreen()
                })
            //处理 部分安卓手机 无法退出全屏问题
            this.on('exitFullscreen', function(a) {
                    activeType = ''; //更新一下状态
                    onNoramlScreen()
                })
            //存储视频播放进度
            this.on('progress', function(a) {

                    var howLongIsThis = myPlayer.duration();
                    var whereYouAt = this.currentTime();

                    if(whereYouAt >= howLongIsThis){
                        whereYouAt = 0;
                    }
                    $api.setStorage('video_'+_urlkey,whereYouAt);
                })

            /**
             * 监听 视频播放器 进入 退出 全屏事件 
             * 用以解决全屏 的时候 部分安卓手机 第一次按下keyback键apicloud监听不到问题 需2次apicloud才能监听到(魅族mx4Pro 有此问题)
             **/
            this.on('fullscreenchange', function() {
                activeType = this.isFullscreen() ? 'requestFullscreen' : '';
                if (activeType === 'requestFullscreen') {
                    onFullScreen()
                } else {
                    onNoramlScreen()
                }
            })
        });
    // 全屏回调函数
    function onFullScreen() {

        if ('undefined' !== typeof api) {
            api.setFullScreen({
                fullScreen: true
            });
            api.setScreenOrientation({
                orientation: 'landscape_left'
            });

            hh=api.winHeight;
            ww=api.winWidth;

            if(hh>ww){
                myPlayer.width(hh);
                myPlayer.height(ww);
            }else{
                myPlayer.width(ww);
                myPlayer.height(hh);
            }

        }
    };
    // 退出全屏回调函数
    function onNoramlScreen() {

        if ('undefined' !== typeof api) {
            api.setScreenOrientation({
                orientation: 'portrait_up'
            });
            api.setFullScreen({
                fullScreen: false
            });

            hh=api.winHeight;
            ww=api.winWidth;

            if(hh>ww){
                myPlayer.width(ww);
                myPlayer.height(hh);
            }else{
                myPlayer.width(hh);
                myPlayer.height(ww);
            }
        }
    }
    function closeWin(){

        var jsfun = 'closeWin();';
        api.execScript({
            script: jsfun
        });
    }


如果不清楚的这边附带一个demo。【基于apicloud的demo】外部调用请自行完善。 wap要用也可以稍作修改。

demo下载

链接:https://pan.baidu.com/s/1uah8EO2UxzMQiHdTMdOKdw   提取码:iykx 



白俊遥博客
请先登录后发表评论
  • 最新评论
  • 总共0条评论
  • © 2017-2018 iskeys.com 版权所有 ICP证:闽ICP备16003513号-1
  • 联系邮箱:c383542045@qq.com