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

OpenSKEYE

于 2022-05-06 09:16:30 发布

阅读量5.9k

点赞数

分类专栏： SkeyeWebPlayer 文章标签： javascript 前端 html5 H5 无插件直播 H5 WEB网页播放器

本文链接：https://blog.csdn.net/weixin_42113310/article/details/124602533

版权

SkeyeWebPlayer 专栏收录该内容

18 篇文章 14 订阅

订阅专栏

SkeyeWebPlayer.js H5播放器是由成都视开信息科技开发和维护的一个完善的RTSP、FLV、HLS等多种流媒体协议播放，视频编码支持H.264，H.265，音频支持AAC，支持TCP/UDP协议，是一套极佳的且适合用于综合安防视频云服务播放组件，已经非常稳定、完整。功能包括：直播、录像、抓图，目前在功能性、稳定性、可扩展性和完整性极强的一款H5播放器！

上一节加到编译flvjs播放器，实现基础的播放器功能，本节将实现自定义动态创建video标签渲染。如下图：

在这里插入图片描述

首先为了方便开发，需要将项目的目录结构做以下调整

在这里插入图片描述

新建flv目录，将之前的flvjs代码放到这个目录内，
新建一个element 目录下新建index.js，具体代码：放在下面，
首先创建一个 class 类，Element 接受self:（调用this）,dom:（播放器容器：由初始化传入ID去获取：document.getElementById(ID)）options:{height},当然如果有需要其他参数也可以传入，根据自己的需求来即可，
首先判断有没dom （播放器容器）
height：是否继承外部容器的高度 Boolean值，false：动态设置播放器容器 56.25% 也就是默认值 16:9，

createElement js动态创建video标签，设置宽高为容器的宽高

  export default class Element {
      constructor(self, dom, {height}) {
          if (!dom) {
              return '';
          }
          if (height) {
              dom.style.position = 'relative';
              dom.style.backgroundColor = '#000000';
              dom.style.overflow = 'hidden';
          } else {
              dom.style.position = 'relative';
              dom.style.backgroundColor = '#000000';
              dom.style.width = '100%';
              dom.style.height = '100%';
              dom.style.paddingTop = '56.25%';
              dom.style.overflow = 'hidden';
          }
          this.elDom = dom;
  
          this.videoEl = document.createElement('video');
          this.videoEl.style.width = '100%';
          this.videoEl.style.height = '100%';
          this.videoEl.style.position = 'absolute';
          this.videoEl.style.top = '0';
          this.videoEl.style.left = '0';
          this.videoEl.style.background = '#000000';
          this.videoEl.style.background = '#000000';
          this.elDom.appendChild(this.videoEl);
  
          // this.videoEl.setAttribute('webkit-playsinline', 'true');
          // this.videoEl.setAttribute('playsinline', 'true');
      }
  }

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

在src 目录下index.js 完整代码放在最后面
import Element from ‘./element’;
this.videoElement = new Element(this, this.boxDom, { height: height });

至此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;
	  }
	}

o’, 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;
	  }
	}