angular.4 手机端 使用 larkplayer播放视频

1、下载 larkplayer 插件

 npm install larkplayer

2、在html 中写入video标签，根据自己的需求设置属性

           <video   [id]="'video_1_' + videoList[0].id"   src="http://47.111.76.8:10180/gethls1_1_1_0_0.m3u8?uuid=d02cc372" controls>
               请升级浏览器以支持 html5 video
           </video>
        
        
      video属性如下：
              controls           控制进度条
              src=" 视频地址 "    播放的视频地址
              autoplay=true      视频自动加载或自动播放
              
             设置播放器的大小需要根据视频的比例来设置
               
              width              一开始可以先设置宽
              height             设置好宽后，在浏览器自适应显示高度，在进行设置高度

3、 在js里初始化

     2.1  根据自己的功能设置全局变量
   
          currentVideo: any = {
		        tabIndex: 1,
		        tabTwoLevelIndex: 0,
		        operates: {
		            playMode: 1, // 播放类型： 1、单页面播放，4、四页面播放
		            definition: 1, // 清晰度：1、流畅，2、清晰
		            playState: false, // 播放状态：false：暂停，true：播放
		            muted: false, // 静音状态：false：否，true：是
		            isFullscreen: false, // 是否全屏：否，true：是
		        },
		    };
		    
    2.2    js 中初始化事件
    
       ngAfterViewInit(): void {     //  
             // 调用播放器初始化
		        this.videoPlayerInit(this.videoList[0], 'video_1_');
		        this.currentVideo = this.videoList[0];
	   }  
	
	   ngAfterViewChecked() {
	        if (this.playMode !== this.afterPlayMode) {
	            this.afterPlayMode = this.playMode;
	            if (this.playMode === 1) {
	                this.videoPlayerInit(this.videoList[0], 'video_1_');
	                this.currentVideo = this.videoList[0];
	            } else if (this.playMode === 4) {
	                for (const item of this.videoList) {
	                    this.videoPlayerInit(item, 'video_');
	                }
	            }
	        }
	    }
      // 视频播放器初始化
	    videoPlayerInit(item, prefix) {
	        item.player = larkplayer(prefix + item.id, {
	            muted: true
	        }, () => {
	            item.player.play();
	        });
	    }
	    
	    // 切换 播放类型：1、单页面播放，4、四页面播放
	    changePlayMode() {
	        this.playMode = this.playMode === 1 ? 4 : 1;
	    }
	
	    // 打开清晰度菜单
	    openDefinitionMenu($event) {
	        $event.stopPropagation();
	        this.isoPenDefinitionMenu = true;
	    }
	
	    // 设置清晰度
	    setDefinition($event, d) {
	        $event.stopPropagation();
	        this.isoPenDefinitionMenu = false;
	        this.currentVideo.operates.definition = d;
	    }
	
	    // 播放/停止
	    setPlayState($event) {
	        // 控制开关状态的变量
	        this.currentVideo.operates.playState = !this.currentVideo.operates.playState;
	        if (this.currentVideo.operates.playState) {
	            this.currentVideo.player.play();   // 播放
	        } else {
	            this.currentVideo.player.pause();    // 停止
	        }
	    }
	
	    // 静音/ 开启声音
	    setMutedState($event) {
	        this.currentVideo.operates.muted = !this.currentVideo.operates.muted;
	        this.currentVideo.player.muted(this.currentVideo.operates.muted);
	    }
	
	    // 全屏
	    setFullScreen($event) {
	        this.currentVideo.player.exitFullscreen();
	        this.currentVideo.operates.isFullscreen = !this.currentVideo.operates.isFullscreen;
	        this.currentVideo.player.requestFullscreen();
	        this.isFull = !this.isFull;
	    }

player.exitFullscreen() 全屏
player.requestFullscreen() 方法用于发出异步请求使元素进入全屏模式