课前准备：直播流协议 https://www.cnblogs.com/yangchin9/p/14930874.html

前言：PC端、H5页面播放 flv 视频流

测试直播链接：https://live.cgtn.com/1000/prog_index.m3u8

一、简介

HTML5 原生仅支持播放 mp4/webm 格式，是不支持 FLV格式的，好在Bilibili大神给了我们解决方案，那就是免费开源的flv.js， 有了flv.js的加持HTML5 上也能支持延迟极低的 HTTP FLV 播放

原理：
flv.js在获取到FLV格式的音视频数据后将 FLV 文件流转码复用成 ISO BMFF（MP4 碎片）片段，再通过Media Source Extensions API 传递给原生HTML5 Video标签进行播放；
也就是说当我们拿到flv视频流以后，直接使用flv.js+video标签就可以实现直播了

二、安装与使用

安装flv.js的方式有两种；

1、script标签引入cdn链接，或者是直接下载flv.js到本地后引入

2、npm安装

// 方法一 script标签引入

// 开发阶段可使用未压缩的版本，方便调试

// <script src="https://cdn.bootcdn.net/ajax/libs/flv.js/1.6.2/flv.js"></script>

<script src="https://cdn.bootcdn.net/ajax/libs/flv.js/1.6.2/flv.min.js"></script>

// 方法二 npm安装

npm i flv.js -S

// 引入

import flvjs from 'flv.js'

// 具体使用

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>flv.js教程</title>

<style>

#videoElement{

    width: 300px;

    height: 200px;

}

</style>

</head>

<video id="videoElement"></video>

<!-- 开发阶段可使用未压缩的版本，方便调试 -->

<!-- <script src="https://cdn.bootcdn.net/ajax/libs/flv.js/1.6.2/flv.js"></script> -->

<script src="https://cdn.bootcdn.net/ajax/libs/flv.js/1.6.2/flv.min.js"></script>

<script>

    if (flvjs.isSupported()) {

        var videoElement = document.getElementById('videoElement');

        var flvPlayer = flvjs.createPlayer({

            type: 'flv',

            url: 'http://flv.yinyuetai.com/uploads/videos/common/0781012623061B0C379B5C52B815FA1D.flv'

        });

        flvPlayer.attachMediaElement(videoElement);

        flvPlayer.load();

        flvPlayer.play();

    }

</script>

</html>

三、开发物料

1、flv.js文档

直播插件-flv.js的更多相关文章

  1. flv.js的追帧、断流重连及实时更新的直播优化方案

    目录 1. 前言 2. 前端直播 2.1 常见直播协议 2.2 flv.js 的原理 2.3 flv.js 的简单使用 3. flv.js 的优化方案 3.1 追帧-解决延迟累积问题 3.2 断流重连 ...

  2. SRS+flv.js打造兼容性较高的直播、点播平台

    **************************************************************************************************** ...

  3. livego+obs+flv.js 搭建视频直播

    一.流程 主播通过 obs软件通过直播 ->推流到->直播服务器 客户通过浏览器 访问站点->flv.js拉取直播服务器视频流并播放 二.环境 centos7 直播服务器 https ...

  4. vlc+flv.js 摄像头 H5 直播

    背景 业务需求:用最短的时间搞定摄像头直播到Web页面.因为没有过这方面经验,所以走了很多弯路,其实也不算弯路吧,大部分时间花在学习基础概念,寻找快速方案中.惯性思维想当然的以为找组件,配地址就能搞定 ...

  5. flv.js怎么用？全面解读flv.js代码

    flv.js项目的代码有一定规模,如果要研究的话,我建议从demux入手,理解了demux就掌握了媒体数据处理的关键步骤,前面的媒体数据下载和后面的媒体数据播放就变得容易理解了. 先普及点背景知识,为 ...

  6. js插件---video.js如何使用

    js插件---video.js如何使用 一.总结 一句话总结:还是要去官方网站去看英文文档.快点把英语学好啊. 1.如何快速使用这些插件(比如video.js)? 直接百度这些js如何使用就可以了,这 ...

  7. Flv.js文档使用随记

    关键字:Flv.js | Flv js | Flv-js | HTML5 FLV Player | 0x001: 前言以下涉及到 flv.js 所有内容均是V1.5.0版本内的,如方法.属性.常量.监 ...

  8. 播放视频插件swfobject.js与Video Html5

    播放视频的方法: 方法一. 使用HTML5播放 <video src="./files/Clip_480_5sec_6mbps_h264.mp4" width="1 ...

  9. Flv.js

    Flv.js 是 HTML5 Flash 视频(FLV)播放器,纯原生 JavaScript 开发,没有用到 Flash.由 bilibili 网站开源. 该项目依托于 Media Source Ex ...

  10. javascript模板插件amaze.js

    摘要: 最近在开发项目时,异步接口需要前端渲染数据,js拼接太低级,必然要用模板插件.之前用过基于jQuery的和juicer等插件,考虑到以后公司项目上的统一,移动端和pc端上的统一,以及可维护性, ...

随机推荐

  1. Luogu P4037 [JSOI2008] 魔兽地图 题解

    P4037 [JSOI2008] 魔兽地图 比较难的树上背包题目. 题目中装备有购买限制,所以二维树上背包状态肯定无法表示.又由于每件装备的合成只与其子节点的合成数量有关,所以需要一维表示这一个装备合 ...

  2. 华为机试题 Redraiment

    简介 动态规划问题. 对于贪心无法解决的问题, 要第一时间想到动态规划问题的解法. 但是对于动态规划问题, 你要想的是使用dp[] 还是 dp[][] 其中每个dp元素表示的意义 这题的dp[i] 表 ...

  3. K8s 自定义调度器 Part1：通过 Scheduler Extender 实现自定义调度逻辑

    本文主要分享如何通过 Scheduler Extender 扩展调度器从而实现自定义调度策略. 1. 为什么需要自定义调度逻辑 什么是所谓的调度? 所谓调度就是指给 Pod 对象的 spec.node ...

  4. 如何选择最适合企业的ETL解决方案？

    在今天的大数据时代,企业的数据管理和处理变得愈发重要.企业也越来越依赖于数据仓库和数据湖来提取.转换和加载(ETL)关键业务信息.一个高效.灵活的ETL解决方案不仅能提升数据处理能力,还能为企业决策提 ...

  5. SciTech-Mathmatics-ImageProcessing-Remove the Background Color or Image from an image using Python+NumPy+Pandas

    https://www.geeksforgeeks.org/how-to-remove-the-background-from-an-image-using-python/ Remove Backgr ...

  6. SciTech-Docs.-RFC2119-Key words for use in RFCs to Indicate Requirement Levels@NetworkWorkingGroup:S.Bradner@HarvardUniversity

    R.F.C. : Request For Comments https://www.rfc-editor.org/rfc/rfc2119 ,Key words for use in RFCs to I ...

  7. 标准结构篇：10）合理收集和理解标准standards

    本章目标:合理收集.理解.使用标准. 1.前言 没有比标准更好的设计依据了. 如果说哪种设计更可靠.更能经得起验证.更能说服别人,那就是按照国家标准的设计(有明确标准编号的那种). 依据标准来设计,总 ...

  8. Win11系统摄像头被禁用的问题

    有技术员联盟的用户反馈说win11系统如何打开被禁用摄像头的问题,其实,因为他们想找到的摄像头的定义不同于计算机系统.在计算机中,它只被称为相机.那我们要如何恢复摄像头的权限呢?接下来,电脑基地小编就 ...

  9. 【辅助工具】动手制作base64加密解密全自动py脚本

    1. 首先是为了学习base64才写的这个脚本,另外也为了以后使用方便,不当之处还望批评指正. 2. 接下来先看第一部分,这一块主要是将用户输入转换成二进制,并将所有字符合并成一个元素. 3. 之所以 ...

  10. CF2070E(edu.175) Game with Binary String 题解

    题意: 题目描述较为繁琐,vj上有翻译版:点这里 思路: 首先可以确定的是,如果玩家 \(2\) 的策略是最优策略,那么其一定会选形如 \(01/10\) 这样的串.因为玩家 \(2\) 必须要选至少 ...