HTML5原生<video>与 flv.js

心灵的宁静 發表於 2021-2-26 11:16:00

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 更是听都没听说过。
<div>
<div>（3）比如优酷只有高清和标清才有 MP4 源，超清、1080P 等，基本都是 FLV 和 HLS（M3U8）的视频源。</div>
<div>         而腾讯视频，因为转型 MP4 比较早，视频源几乎全部都是 MP4 和 HLS，所以现在可以在 Mac OS X 上率先支持 PC Web 端的 HTML5 播放器（Safari 下 HLS、Chrome 下 MP4）。</div>
<div> </div>
<div>4，HTNL5一定不能支持flv格式吗？</div>
<div> </div>
方法：媒体源扩展 API（MSE）提供了实现无插件且基于 Web 的流媒体的功能。</div>
<div>使用 MSE，媒体串流能够通过 JavaScript 创建，并且能通过使用 <code><audio></code> 和 <code><video></code> 元素进行播放。 </div>
<div>
<div>HTML5 <video> 不仅可以直接播放上面支持的 mp、webm、ogg 格式，还可以支持由 JS 处理过后的视频流，这样我们就可以用 JS 把一些不支持的视频流格式，转化为支持的格式</div>

</div>
<div> </div>
<div>5，MSE 技术 B 站开源的 flv.js 就是这个技术的一个典型实现。B 站的 PC HTML5 播放器，就是用 MSE 技术，将 FLV 源用 JS 实时转码成 HTML5 支持的视频流编码格式</div>
 
 
尝试使用腾讯的tcplayer   和  flv.js   
yarn add tcplayer
 tcplayer 的包没有index.d.ts，需要在angular.json 
<div class="cnblogs_code">
<pre>"scripts": [
"node_modules/tcplayer/index.js"
]</pre>
</div>
yarn add flv.js
<div class="cnblogs_code">
<pre><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></pre>
</div>
<div class="cnblogs_code">
<pre>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 = this.url;
 const player = new TcPlayer('id_test_video', option);
 }</pre>
</div>
 
 
tcplayer只支持MP4和hls(m3u8),  2020.12.31号后Adobe flash又不能用了，又暂时不需要用hls，还不如用原生video+flv.js
<div class="cnblogs_code">
<pre><ng-container *ngIf="extension !== '.flv'">
<video id="video_element" width="100%" height="100%" controls="true" controlsList="nodownload" autoplay="true">//禁用控制栏右边...的视屏下载
<source ="url" type="video/ogg" />
<source ="url" type="video/mp4" />
<source ="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></pre>
</div>
 
<div class="cnblogs_code">
<pre>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();
 }
 } </pre>
<div>
<div>// 禁用右键下载视频</div>
<div>$('#video_element').on('contextmenu', () => { return false; });</div>
</div>
<pre> </pre>
</div>
 
 
移动端浏览器播放
<div>x5-video-player-type="h5"  使<video>在微信上不在最上层</div>
<div class="cnblogs_code">
<pre><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 ="url" type="video/ogg" />
<source ="url" type="video/mp4" />
<source ="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></pre>
</div>
<div class="cnblogs_code">
<pre>.video_container {
display: flex;
width: 100%;
height: 100%;
#video_element {
margin: auto; // 垂直居中
}
}</pre>
</div>
<div class="cnblogs_code">
<pre>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(); // 加载完再播放
 });
 }</pre>
</div>
<img src="https://img2020.cnblogs.com/blog/1374003/202103/1374003-20210305182336594-275887117.png">
  
来源：https://www.cnblogs.com/tingying/p/14451195.html

頁: [1]

琼殿技术论坛's Archiver

HTML5原生<video>与 flv.js