SDK 初始化时配置控件

初始化时，可以配置播放器基本功能，自定义播放器内置的通用组件，示例代码如下：

const options = {
    'controls': true， //是否显示控制条
    'autoplay': true， //是否自动播放(ios不支持自动播放)
    /*预加载选项*/
    'preload': "auto", //'auto'预加载视频（需要浏览器允许）、'metadata'仅预加载视频meta信息、'none'不预加载;
    'poster': "myPoster.jpg", //视频播放前显示的图片
    'loop': true, //是否循环播放
    'width': 640, //设置播放器宽度
    'height': 480, //设置播放器高度
    'aspectRatio': '16:9' //将播放器置于流体模式下，计算播放器动态大小时使用该值,该值应该是比用冒号隔开的两个数字（如“16:9”或“4:3”）
    'fluid': ture, //自适应宽高,播放器将会有流体体积,换句话说，它将缩放以适应容器,如果<video>标签有“vjs-fluid”样式时，这个选项会自动设置为true。
    'language': 'zh-CN', // 设置语言，可选 en | zh-cn | zh-tw
    'muted': false, // 是否静音
    'nativeControlsForTouch': false, //是否使用浏览器原生的控件
    'autoSetup': false, //阻止播放器为具有data-setup属性的媒体元素运行autoSetup，注意：必须在与videojs.options.autoSetup = falsevideojs源加载生效的同一时刻全局设置。
    'playbackRates': [0.5，1，1.25，1.5，2], //设置变速播放倍率选项，仅 HTML5 播放模式有效。严格大于0的数字数组，其中1表示常速（100％），0.5表示半速（50％），2表示双速（200％）等。如果指定，播放器显示控件允许用户从选择数组中选择播放速度。选项以从下到上的指定顺序显示
    'bigPlayButton':false //是否显示居中的播放按钮（浏览器劫持嵌入的播放按钮无法去除）。
    //'children': []|Object, 此选项继承自基Component类。
    'techOrder': ['html5','flvjs'], //优先使用的播放模式（2.3.0版本开始支持flvjs）
    'streamTimeoutTime': 30 * 1000, //拉流超时时间，默认30s
    'errMsg7': '拉流超时请重新请求', //sdk拉流超时后，页面的UI提示
    'controlBar': { //设置播放器控件
        playToggle: true, //播放/暂停按钮
        volumePanel: { //音量控制控件，音量条竖直
            inline: false, 
            CurrentTimeDisplay: true 
        }, 
        currentTimeDisplay: true, //当前播放时间
        timeDivider: false, // '/' 分隔符
        durationDisplay: true, //总时间
        progressControl:{ , //点播模式时，播放进度条，seek控制
            seekBar：{ 
                loadProgressBar: true, //是否显示资源加载的进度条
                mouseTimeDisplay: true, //鼠标点击是否显示时间
                playProgressBar: true //是否显示已经播放的进度条
            }
        },    
        liveDisplay:false, //直播流时，显示LIVE
        remainingTimeDisplay: false, //当前播放时间
        playbackRateMenuButton: true, //是否显示播放速率选择按钮
        chaptersButton: false, //
        descriptionsButton: false, //用于切换和选择描述的按钮组件，需要使用相关能力
        fullscreenToggle: true, //全屏控制
        
        children:[ //使用children的形式可以控制每一个控件的位置，children配置后，完全就按 children 的配置走。前面相同内容的设置就无效了
            {name: 'playToggle'}, // 播放按钮
            {name: 'currentTimeDisplay'}, // 当前已播放时间
            {name: 'progressControl'}, // 播放进度条
            {name: 'durationDisplay'}, // 总时间
            {name: 'FullscreenToggle'} // 全屏
            //......
        ]
    }
}

const videoId = 'my-video' //video标签的id，全局唯一
var myPlayer = neplayer(videoId , options, function () {
    console.log('播放器初始化完成: ', myPlayer)
    
    //开始拉流播放视频
    myPlayer.setDataSource([{
        type: 'application/x-mpegURL', //表示hls，'video/x-flv'表示flv，'video/mp4'表示mp4，'nertc'表示低延迟直播
        src: '', //拉流地址
        isLive: true //是否是直播拉流
   }])
})

自定义控件

使用自定义控件的方法添加播放器原有控件

//neplayer: 播放器的全局对象
//myPlayer: 初始化播放器的实例对象

//获取播放器默认的进度条组件
var progressControl = neplayer.lib.getComponent('progressControl') 
//注册该组件
neplayer.lib.registerComponent('progressControl', progressControl) 
// 找到播放器的 controlBar 节点，添加进度条组件控件
myPlayer.corePlayer.getChild('controlBar').addChild('progressControl')

添加自定义新的控件

//neplayer: 播放器的全局对象
//myPlayer: 初始化播放器的实例对象

//获取播放器基类的Component组件
var baseComponent = neplayer.lib.getComponent('Component')

//自定义的组件
var myComponent = neplayer.lib.extend(baseComponent, { //继承播放器的组件基类
    constructor: function(player, options) { //构造函数
      baseComponent.apply(this, arguments)
      this.on('click', this.clickIcon)
    },
    createEl: function() { //创建一个组件，是一张图片
      var divObj = neplayer.lib.dom.createEl('div', {
        // 给元素加vjs-开头的样式名，是播放器内置样式约定俗成的做法
        className: 'vjs-my-components',
        innerHTML:
          '<img style="width:10px;height:10px;" src="https://xxx.xxx.jpg" />'
      })
      return divObj
    },
    clickIcon: function() {
      alert('你点击了图片')
    }
})

neplayer.lib.registerComponent('myComponent', myComponent)

// 找到 controlBar 节点，添加自定义的控件，就在播放器的控制栏添加了一张图片
myPlayer.corePlayer.getChild('controlBar').addChild('myComponent')