视频流处理

不同厂商会有不同的视频流格式，按照文档使用相应的库即可，一般来说，web端常见的视频流是.flv格式和.m3u8格式

flv.js

flv.js主要处理.flv格式

import * as flvjs from 'flv.js';
/** 
  * @description 停止混流播放并移除直播流抓取 
  * (注：离开并重新进入当前路由，观察Network，可知该操作的必要性) 
  */
pausemix() {
    this.flvPlayer.pause();
    this.flvPlayer.unload();
    this.flvPlayer.detachMediaElement();
    this.flvPlayer.destroy();
    this.flvPlayer = null;
}
/**
  * @description 新建flv实例 
  */
createFlvPlayer(url: string) {
    if (flvjs.default.isSupported()) {
        const videoElement = document.getElementById('videoId');
        this.flvPlayer = flvjs.default.createPlayer({
            type: 'flv',
            isLive: true,
            cors: true,
            hasAudio: false,// 是否有音频
            url: url
            // url: 'https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv'
        })

        this.flvPlayer.attachMediaElement(videoElement);
        this.flvPlayer.load();
        this.flvPlayer.play();
    }
}

video.js

video.js主要处理.m3u8格式视频

• angular.json

"node_modules/video.js/dist/video-js.min.css",

• html

<video id="my-player" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" data-setup="{}"
       autoplay width="100%" height="100%" style="width: 100%;height:100%;">
	<!--this.sanitizer.bypassSecurityTrustUrl('https://cctvwbcdks.v.kcdnvip.com/cctvwbcd/cdrmcctv1_1/index.m3u8')-->
    <source [src]="safeUrl">

    <p class="vjs-no-js">
        播放视频需要启用JavaScript，推荐使用支持HTML5的浏览器访问。
        <a href="http://videojs.com/html5-video-support/" target="_blank"> supports HTML5 video</a>
    </p>
</video>

• typescropt

import videojs from "video.js"

initVideo() {
    // const dom = document.getElementById('videoId');
    // const option = {
    //     // 视频配置项
    //     //是否显示播放按钮
    //     bigPlayButton: true,
    //     // 封面图
    //     posterImage: true,
    //     errorDisplay: false,
    //     //设置小喇叭音量键
    //     controlBar: {
    //        fullscreenToggle: true,
    //         // 音量条的横向还是纵向显示
    //         volumePanel: {
    //             inline: false,
    //         },
    //     },
    //     muted: true // //静音模式   解决首次页面加载播放。
    // };
    videojs('my-player', {}, function onPlayerReady() {
        videojs.log('Your player is ready!');

        // In this context, `this` is the player that was created by Video.js.
        this.play();

        // How about an event listener?
        this.on('ended', function () {
            videojs.log('Awww...over so soon?!');
        });
    });
}