Video.js爬坑指南

在上一篇我们已经讲解过Video.js和cKplayer的引入和使用，任何事物都具有两面性，插件在简单好用的同时，也会有很多坑让我们遇到，这篇文章就会针对，video.js使用过程都各种坑，提供相应的解决办法。

1.在angular中将rtmp播放地址，直接写在html文件中，不能播放

<video 
    id="historyVideo" 
    class="video-js vjs-big-play-centered history-video" 
    controls 
    preload="auto"
    data-setup='{}'>
    <source src="rtmp://58.200.131.2:1935/livetv/hunantv" style='width: 100%;height: 100%'  type="rtmp/flv" />
   <p class="vjs-no-js">您的浏览器不支持HTML5，请升级浏览器。</p>
</video>

解决办法：利用DomSanitizer获取安全播放地址即可播放

import { DomSanitizer } from '@angular/platform-browser'; 

private sanitizer: DomSanitizer

<video 
    id="historyVideo" 
    class="video-js vjs-big-play-centered history-video" 
    controls 
    preload="auto"
    data-setup='{}'>
    <source src="sanitizer.bypassSecurityTrustUrl（'rtmp://58.200.131.2:1935/livetv/hunantv'）" style='width: 100%;height: 100%'  type="rtmp/flv" />
   <p class="vjs-no-js">您的浏览器不支持HTML5，请升级浏览器。</p>
</video>

2. 在angular中切换视频地址，播放的视频没有改变？

解决办法：Video.js中只改变source的src是不能切换视频的，我们要做的是先移除video标签，再重新创建video标签

// 移除video标签
let id = 'myVideo';
let ele = this.el.nativeElement.querySelector('#' + id);
videojs(ele).dispose();

//创建video

import { Component, OnInit, ElementRef, Renderer2 } from '@angular/core';

private renderer: Renderer2

createdom(){			
    let pNode = this.el.nativeElement.querySelector('#videoItem');
    let newVideo = this.renderer.createElement('video');
    this.renderer.addClass(newVideo, 'video-js vjs-big-play-centered video test');
    this.renderer.setAttribute(newVideo, 'id', 'myVideo');
    this.renderer.setAttribute(newVideo, 'controls', 'true');
    this.renderer.setAttribute(newVideo, 'preload', 'auto');
    this.renderer.setAttribute(newVideo, 'data-setup', '{}');
    this.renderer.appendChild(pNode, newVideo);
 }