HTML5原生 與 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(); // 加載完再播放
        });
      }