返回顶部
首页 > 资讯 > 前端开发 > JavaScript >flv.js的具体使用教程
  • 847
分享到

flv.js的具体使用教程

flv.js使用flv.js 2023-05-19 17:05:32 847人浏览 八月长安
摘要

目录简介flv.js常用方法flv.js简单使用简介 Flv.js 是 HTML5 Flash 视频(FLV)播放器,纯原生 javascript 开发,没有用到 Flash。由 b

简介

Flv.js 是 HTML5 Flash 视频(FLV)播放器,纯原生 javascript 开发,没有用到 Flash。由 bilibili 网站开源。它的工作原理是将 FLV 文件流转码复用成 ISO BMFF(MP4 碎片)片段,然后通过 Media Source Extensions 将 MP4 片段喂进浏览器。

媒体部分

配置 

flv.js常用方法

1:flvjs.isSupported():判断当前浏览器是否支持播放

2:flvPlayer = flvjs.createPlayer(mediaDataSource: MediaDataSource, config?: Config):创建一个播放实例

3:flvPlayer.attachMediaElement(mediaElement: htmlMediaElement):将播放实例注册到video节点

4:flvPlayer.load():加载数据流

5:flvPlayer.play():播放数据流

6:flvPlayer.pause():暂停播放数据流

7:flvPlayer.unload():取消数据流加载

8:flvPlayer.detachMediaElement():将播放实例从节点中取出

9:flvPlayer.destroy():销毁播放实例

flv.js简单使用

1:html

<video id="my-player" preload="auto" muted autoplay type="rtmp/flv">
    <source src="">
</video>

2:js

(1):在index.xml文件中引入flv.js

<script src="./flv.js/flv.min.js"></script>

(2):使用flv.js实现播放flv格式流,获取video节点

videoElement = document.getElementById('my-player');
if (flvjs.isSupported()) {
    flvPlayer = flvjs.createPlayer({
        type: 'flv',					//媒体类型
        url: 'XXXX'						//flv格式媒体URL
        isLive: true,					//数据源是否为直播流
        hasAudio: false,				//数据源是否包含有音频
	    hasVideo: true,					//数据源是否包含有视频
	    enableStashBuffer: false		//是否启用缓存区
    },{
        enableWorker: false, 			//不启用分离线程
        enableStashBuffer: false, 		//关闭IO隐藏缓冲区
        autoCleanupSourceBuffer: true 	//自动清除缓存
    });
    flvPlayer.attachMediaElement(videoElement);	//将播放实例注册到节点
    flvPlayer.load(); 					//加载数据流
    flvPlayer.play();					//播放数据流
}

(3):关闭视频流

flvPlayer.pause();						//暂停播放数据流							
flvPlayer.unload();						//取消数据流加载
flvPlayer.detachMediaElement();			//将播放实例从节点中取出
flvPlayer.destroy();					//销毁播放实例

到此这篇关于flv.js的具体使用教程的文章就介绍到这了,更多相关flv.js使用内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: flv.js的具体使用教程

本文链接: https://lsjlt.com/news/213530.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • flv.js的具体使用教程
    目录简介flv.js常用方法flv.js简单使用简介 Flv.js 是 HTML5 Flash 视频(FLV)播放器,纯原生 JavaScript 开发,没有用到 Flash。由 b...
    99+
    2023-05-19
    flv.js使用 flv.js
  • 详解MybatisGenerator的具体使用教程
    目录1、相关文件2、使用方法Mybatis属于半自动ORM,在使用这个框架中,工作量最大的就是书写Mapping的映射文件,由于手动书写很容易出错,我们可以利用Mybatis-Gen...
    99+
    2024-04-02
  • Android入门教程之Fragment的具体使用详解
    目录Fragment 的简单用法动态加载 FragmentFragment 实现返回栈Fragment 和 Activity 之间的交互Fragment 生命周期Fragment 的...
    99+
    2024-04-02
  • Android入门教程之RecyclerView的具体使用详解
    目录RecyclerView 的基本用法横向滚动RecyclerView 点击事件RecyclerView 的基本用法 和我们之前学习的控件不一样,RecyclerView 属于新增...
    99+
    2024-04-02
  • Android入门教程之ListView的具体使用详解
    目录ListView 的简单用法定制 ListView 的界面提升 ListView 的运行效率ListView 的点击事件ListView 的简单用法 在布局中加入 ListVie...
    99+
    2024-04-02
  • Quartz.NET的具体使用
    目录一、什么是Quartz.NET?二、Quartz.NET可以做什么?三、ASP.NET Core如何使用Quartz.NET?四、Quartz的cron表达式一、什么是Quart...
    99+
    2024-04-02
  • QtQFrame的具体使用
    目录1.概述2.常用数据接口3.示例1.概述 void setFrameShape(Shape) QFrame继承QWidget,QFrame类是具有框架的小部件的基类,例如QLab...
    99+
    2024-04-02
  • pythonhttpx的具体使用
    目录什么是 Httpx安装 Httpx发送 HTTP 请求发送异步 HTTP 请求设置请求标头设置请求参数发送请求体发送 JSON 数据设置超时错误处理证书验证使用代理上传文件使用 ...
    99+
    2023-05-14
    python httpx
  • np.unique()的具体使用
    目录一、np.unique() 介绍二、np.unique() 原型三、实例参考链接一、np.unique() 介绍 对于一维数组或者列表,np.unique() 函数 去除其中重复...
    99+
    2023-03-14
    np.unique()使用 np.unique()
  • JavaScheduledExecutorService的具体使用
    目录1. 延迟不循环任务schedule方法2. 延迟且循环cheduleAtFixedRate方法3. 严格按照一定时间间隔执行``ScheduledExecutorService...
    99+
    2023-05-19
    ScheduledExecutorService
  • python__add__()的具体使用
    __add__(),  同一个类,两个对象相加的实现逻辑,重写 + class Myclass(object): def __init__(self,value):...
    99+
    2023-02-27
    python __add__()使用 python __add__
  • Go并发编程sync.Cond的具体使用
    目录简介详细介绍案例:Redis连接池注意点简介 Go 标准库提供 Cond 原语的目的是,为等待 / 通知场景下的并发问题提供支持。Cond 通常应用于等待某个条件的一组 g...
    99+
    2022-06-07
    GO sync
  • 小程序wx.getUserProfile接口的具体使用
    最近微信小程序对于审核小程序提出了带有wx.login、wx.getUserInfo接口的调整,并提出了一个新的接口供开发者调用 下图是对于新的接口的官方文档详情 点击前往官网查看更...
    99+
    2024-04-02
  • GNU Parallel的具体使用
    它是什么? GNU Parallel是一个shell工具,为了在一台或多台计算机上并行的执行计算任务,一个计算任务可以是一条shell命令或者一个以每一行做为输入的脚本程序。通常的输入是文件列表、主机列表、用户列表、U...
    99+
    2022-06-04
    GNU Parallel
  • numpy.reshape(-1,1)的具体使用
    数组新的shape属性应该要与原来的配套,如果等于-1的话,那么Numpy会根据剩下的维度计算出数组的另外一个shape属性值。 举个例子: x = np.array([[2, 0]...
    99+
    2024-04-02
  • Vuex localStorage的具体使用
    目录状态管理的必要性localStorage储存和获取数据生命周期VuexVuex的概念Vuex的工作流程Vuex和localStorage的区别总结前端开发中,状态管理是一个很重要...
    99+
    2023-05-20
    Vuex localStorage
  • JavaScript WeakMap的具体使用
    目录前言一、为何选用WeakMap1. Map2. WeakMap二、WeakMap原型方法总结前言 我在处理一个复杂对象的深拷贝方法时接触到WeakMap, 其作为缓存结构以解决对...
    99+
    2023-02-17
    JavaScript WeakMap
  • GO的range具体使用
    目录GO 语言的 for…range  能做什么呢?for…range  如何使用 ?数组 array切片 slicechannel 通道for…rang...
    99+
    2024-04-02
  • C# Volatile的具体使用
    目录​1.Overview2.Detail3.Conclusion4.Reference​1.Overview 经常研究.NET源码库的小伙伴会经常看到一个关...
    99+
    2024-04-02
  • python-httpx的具体使用
    目录安装创建请求自定义头部超时时间SSL证书认证请求类型Query ParamsForm表单文件上传JSON二进制数据响应响应类型Cookie重定向历史httpx.Client合并/...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作