SkeyeWebPlayer.js H5播放器开发之播放器video动态创建（三）

SkeyeWebPlayer.js H5播放器开发之播放器video动态创建（三）_OpenSKEYE的技术博客_51CTO博客

在播放器初始化的时候将创建出来video添加到页面

至此SkeyeWebPlayer播放器之flv播放功能就已经实现

// videoEl
this.videoElement = new Element(this, this.boxDom, {
height: height,
isFill: showMode
});

import Features from './flv/core/features.js';
import ScreenCanvas from './element/off-screen-canvas';
import Element from './element';
import BigPlayButton from './element/big-play-button';
import Emitter from './utils/emitter';
import {isNum, parseLocation} from './utils';
import './font/iconfont.css';
import './styles/index.css';
import './styles/range.css';

import WebFlvPlayer from './player/webFlvPlayer.js';

export default class WebMediaPlayer extends Emitter {
constructor(url, ID, cbFunc, data = {}) {
super();
let {cbUserPtr, decodeType, openAudio, bigPlay = false, height = false, showMode = false, playbackRecord} = data;
this.player = null;
this.url = url;
this.callbackFunc = cbFunc || function () {

};
this.callbackUserPtr = cbUserPtr;
this.height = height;
this.bigPlay = bigPlay;
this.decodeType = 'auto';
this.version = __VERSION__;
this.isPlaying = false;
if (decodeType === 'auto' || decodeType === 'soft') {
this.decodeType = decodeType;
}
if (!Features.supportMSEH264Playback()) {
this.decodeType = 'soft';
}
//此处应为true, 则在所有平台上功能表现正常, 如为false,在苹果上则不能自动播放声音, 现应用在win chrome上，暂置为false;
this.internalTriggerPlay = true;
this.showMode = showMode;
this.playbackRecord = playbackRecord;
this.VideoCodec = '';
this.VideoWidth = 0;
this.VideoHeight = 0;

this.showTimeLabel = false;
this.seeking = false;
this.callbackEnd = false;

this.initH5Flag = false;
this.currentH5Status = false;
this.seekTimeSecs = 0;
this.fullScreenFlag = false;
if (!ID) {
return false;
}
// 声音
this.defaultAudioStatus = !!openAudio;
this.enableAudio = !!openAudio;

this.boxDom = document.getElementById(ID);
if (!this.boxDom) {
return false;
}

// videoEl
this.videoElement = new Element(this, this.boxDom, {
height: height,
isFill: showMode
});
this.h5Video = this.videoEl = this.videoElement.videoEl;
// canvas
this.screenCanvas = new ScreenCanvas(this, this.boxDom);
// 中间大播放按钮
this.bigPlayButton = new BigPlayButton(this, this.boxDom, bigPlay);

this.on('streamType', this._onChangeTypeCallback.bind(this));

if (url) {
this.play(url, true);
}
}

/**
* 播放 play
* @param url
* @param autoPlay
* @param time
* @returns {boolean|void}
*/
play(url, autoPlay = true, time = 0) {
if (!url) {
url = this.url;
}
if (!this.boxDom) {
return false;
} else if (!url) {
return console.log('播放地址不能为空');
} else if (!autoPlay) {
return false;
} else if (!isNum(time)) {
return console.log('time 必须传数字类型');
}
let locationObj = parseLocation(url);
if (!['rtsp:', 'http:', 'https:', 'ws:', 'wss:'].some(item => item === locationObj.protocol)) {
console.log('不支持 stream: ' + url);
}

this.url = url;
this.emit('play');
this.callbackFunc('play');
this.seekTimeSecs = time;

// 关闭加载动画
this._onConnectStatus(this, 99);

// 后缀
let postfix = url.split('.').pop().toLowerCase();
if (this.player) {
// 暂停之后继续播放
this.player.play(this.url, 0);
} else if (/flv$/.test(postfix)) {
// FLV流 (http-flv 、 ws-flv)
this.player = new WebFlvPlayer(this, {
type: 'flv',
isLive: true,
url: url,
videoDom: this.videoEl,
canvasDom: this.screenCanvas.canvas,
decodeType: this.decodeType,
}, {
onGetVideoInfo: this.onVideoInfo,
self: this
});
}
}

stop() {
if (!this.boxDom) return;
this.callbackFunc('stop');
this.callbackEnd = false;
this._onConnectStatus(this, 99); // 关闭加载动画
if (this.playerInstance) {
this.closeAudio();
this.playerInstance.stop();
this.showTimeLabel = false;
return true;
}
return false;
}

pause() {
this.player.pause();
}

removeAllChilds(p) {
for (var i = p.childNodes.length - 1; i >= 0; i--) {
this.removeAllChilds(p.childNodes[i]);
p.removeChild(p.childNodes[i]);
}
}

destroy() {
this.stop();

if (this.boxDom) {
this.removeAllChilds(this.boxDom);
}

if (this.playerInstance) {
this.playerInstance.stop();
this.playerInstance.destroy();
delete this.playerInstance;
this.playerInstance = null;
}
}

changeToH5Video(b) {
if (!this.initH5Flag) {
this.initH5Flag = true;
} else {
if (b === this.currentH5Status) {
return;
}
}
this.currentH5Status = b;
if (b) {
if (this.screenCanvas.canvas) {
this.boxDom.removeChild(this.screenCanvas.canvas);
}
} else {
if (this.h5Video) {
this.boxDom.removeChild(this.h5Video);
}
}
}

// 连接状态回调
_onConnectStatus(_this, status) {
_this.emit('status', status);
}

//流类型回调
_onChangeTypeCallback(streamType, isWasm) {
this.changeToH5Video(!isWasm);
}

/**
* 获取视频编码信息
* @param _this
* @param _videoCodec
* @param _width
* @param _height
* @private
*/
onVideoInfo(_this, _videoCodec, _width, _height) {
_this.VideoCodec = _videoCodec;
_this.VideoWidth = _width;
_this.VideoHeight = _height;
_this.emit('resolutionRatio', {code: _videoCodec, width: _width, height: _height});
_this._onConnectStatus(_this, 100);
}

rtspScale(scaleValue, ptsInterval) {
if (this.playerInstance) {
this.playerInstance.rtspScale(scaleValue, ptsInterval);
}
}

//外部调用(秒)
seekToSecs(seekValue) {
console.log('seekValue', seekValue);
if (this.playerInstance) {
this.playerInstance.seek(seekValue, 0);
}
}

//百分比
seekToPercent(seekValue) {
if (this.playerInstance) {
this.playerInstance.seek(seekValue, 1);
}
}

// 设置滚动条和时间标签
setTrack(timeTrack, timeLabel) {
if (this.playerInstance) {
this.playerInstance.setTrack(timeTrack, timeLabel);
}
}

openAudio() {
this.callbackFunc('openAudio');
if (this.playerInstance) {
if (this.playerInstance.openAudio()) {
//仅为内部判断是否启用音频进行remux
common.SetEnableAudio(true);
this.enableAudio = true;
} else {
this.enableAudio = false;
}
}
this.emit('audio', this.enableAudio);
return this.enableAudio;
}

closeAudio() {
this.callbackFunc('closeAudio');
if (this.playerInstance) {
if (!this.enableAudio) {
return true;
}
if (this.playerInstance.closeAudio()) {
this.enableAudio = false;
} else {
this.enableAudio = true;
}
}
this.emit('audio', this.enableAudio);
return !this.enableAudio;
}

showStaticsInfo(enable) {
if (this.playerInstance == null) {
return false;
}

if (enable) {
return this.playerInstance.openStatinfo();
} else {
return this.playerInstance.closeStatinfo();
}
return false;
}
}