HTML5原生<video>与 flv.js

1，以前很多浏览器播放视频需要用Adobe Flash等插件，Flash应用非常广泛，但却存在很多安全漏洞

   flash为什么被淘汰了

 

2，W3C的最新的HTML5标准中，定义了一系列新的元素来避免使用插件，<video>和<audio>

Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持 <video> 元素

但是，HTML5中的<video>只支持Ogg、MP4、WebM

 

3，国内很多视频平台不开放HTNL5？

（1）历史遗留问题，HTML5 标准以前，Flash 在 Web 视频播放方面有着统治地位。

（2）视频网站的视频源和转码设置，很多都高清源都是适用于 Flash 播放的 FLV 格式，只有少量低清晰度视频是 mp4 格式，webm 和 ogg 更是听都没听说过。

（3）比如优酷只有高清和标清才有 MP4 源，超清、1080P 等，基本都是 FLV 和 HLS（M3U8）的视频源。

         而腾讯视频，因为转型 MP4 比较早，视频源几乎全部都是 MP4 和 HLS，所以现在可以在 Mac OS X 上率先支持 PC Web 端的 HTML5 播放器（Safari 下 HLS、Chrome 下 MP4）。

 

4，HTNL5一定不能支持flv格式吗？

 

方法：媒体源扩展 API（MSE） 提供了实现无插件且基于 Web 的流媒体的功能。

使用 MSE，媒体串流能够通过 JavaScript 创建，并且能通过使用 <audio> 和 <video> 元素进行播放。

HTML5 <video> 不仅可以直接播放上面支持的 mp、webm、ogg 格式，还可以支持由 JS 处理过后的视频流，这样我们就可以用 JS 把一些不支持的视频流格式，转化为支持的格式

 

5，MSE 技术
B 站开源的 flv.js 就是这个技术的一个典型实现。B 站的 PC HTML5 播放器，就是用 MSE 技术，将 FLV 源用 JS 实时转码成 HTML5 支持的视频流编码格式

 

 

尝试使用腾讯的tcplayer   和  flv.js   

yarn add tcplayer

 tcplayer 的包没有index.d.ts，需要在angular.json 

"scripts": [
  "node_modules/tcplayer/index.js"
]

yarn add flv.js

<ng-container *ngIf="extension !== '.flv'">
  <div id="id_test_video" style="width:100%; height:auto;"></div>
</ng-container>

<ng-container *ngIf="extension === '.flv'">
  <video id="videoElement" width="100%" height="100%" controls="controls" autoplay="autoplay"></video>
</ng-container>

import { TcPlayer } from 'tcplayer';
import flvjs from 'flv.js';


 if (this.extension === '.flv') {
        if (flvjs.isSupported()) {
          const videoElement: any = document.getElementById('videoElement');
          const flvPlayer = flvjs.createPlayer({
            type: 'flv',
            url: this.url
          });
          flvPlayer.attachMediaElement(videoElement);
          flvPlayer.load();
          flvPlayer.play();
        }
      } else {
        const exten = this.extension.substring(1);
        const option = {
          autoplay: true, // iOS 下 safari 浏览器，以及大部分移动端浏览器是不开放视频自动播放这个能力的
          // poster: '',
          width: '800', // 视频的显示宽度，请尽量使用视频分辨率宽度
          height: '450', // 视频的显示高度，请尽量使用视频分辨率高度
          wording: {
            12: '请填写视频播放地址',
            2032: '请求视频失败，请检查网络',
            2048: '请求m3u8文件失败，可能是网络错误或者跨域问题'
         }
        };
        option[exten] = this.url;
        const player = new TcPlayer('id_test_video', option);
      }

 

 

tcplayer只支持MP4和hls(m3u8),  2020.12.31号后Adobe flash又不能用了，又暂时不需要用hls，还不如用原生video+flv.js

<ng-container *ngIf="extension !== '.flv'">
  <video id="video_element" width="100%" height="100%" controls="true" controlsList="nodownload" autoplay="true">  //禁用控制栏右边...的视屏下载
    <source [src]="url" type="video/ogg" />
    <source [src]="url" type="video/mp4" />
    <source [src]="url" type="video/webm" />
  </video>
</ng-container>

<ng-container *ngIf="extension === '.flv'">
  <video id="video_element" width="100%" height="100%" controls="true" autoplay="true"></video>
</ng-container>

 

if (this.extension === '.flv') {
        if (flvjs.isSupported()) {
          const videoElement: any = document.getElementById('video_element');
          const flvPlayer = flvjs.createPlayer({
            type: 'flv',
            url: this.url
          });
          flvPlayer.attachMediaElement(videoElement);
          flvPlayer.load();
          flvPlayer.play();
        }
      }

// 禁用右键下载视频

$('#video_element').on('contextmenu', () => { return false; });

 

 

移动端浏览器播放

x5-video-player-type="h5"  使<video>在微信上不在最上层

<div class="video_container" *ngIf="extension !== '.flv'">
  <video id="video_element" width="100%" controls="true" controlsList="nodownload" autoplay="true" webkit-playsinline
    x5-video-player-type="h5" playsinline> // 使不全屏播放
    <source [src]="url" type="video/ogg" />
    <source [src]="url" type="video/mp4" />
    <source [src]="url" type="video/webm" />
  </video>
</div>

<div class="video_container" *ngIf="extension === '.flv'">
  <video id="video_element" width="100%" controls="true" autoplay="true"></video>
</div>

.video_container {
  display: flex;
  width: 100%;
  height: 100%;
  #video_element {
    margin: auto; // 垂直居中
  }
}

if (this.extension === '.flv') {
        if (flvjs.isSupported()) {
          const video_element: any = document.getElementById('video_element');
          const flvPlayer = flvjs.createPlayer({
            type: 'flv',
            url: this.url,
          });
          flvPlayer.attachMediaElement(video_element);
          flvPlayer.load();
          flvPlayer.play();
        }
      } else {
        const video_element: any = document.getElementById('video_element');
        video_element.addEventListener('loadedmetadata', () => {
          video_element.play(); // 加载完再播放
        });
      }