基于Bilibili开源flv.js拉流

flv.js demo地址:http://bilibili.github.io/flv.js/demo/
flv.js源文件(包括配置说明)

先上效果图:(未拉流状态/拉流状态)

html部分:

<div class="layui-row"><div class="layui-col-sm12"><div class="layui-form"><div class="layui-form-item"><div class="layui-inline"><label class="layui-form-label custom-form-label-autowidth-left"style="font-size:14px; left:-7px"langID="html:video_setting.stream_enable"></label><div class="layui-input-inline" style="left:-7px"><input type="checkbox" name="preview_enable" id="preview_enable"  lay-filter="preview_enable"lay-text="START|STOP" lay-skin="switch"></div></div></div></div></div>
</div>
<div class="mainContainer"><div class="video-container"><div><video name="videoElement" class="centeredVideo" style="height: 500px; width: 800px; background-color: black;">Your browser is too old which doesn't support HTML5 video.</video></div></div><div class="layui-row layui-col-space30 layui-col-md3 layui-col" style="top: 20px; left: 710px;"><button class="layui-col-md3 layadmin-ctrl-button-sm iconfont icon-suoxiao" id="LAY-preview-small-button-submit"></button><button class="layui-col-md3 layadmin-ctrl-button-sm iconfont icon-fangda" id="LAY-preview-big-button-submit"></button></div>
</div>

js功能函数部分:

   function flv_load() {console.log('isSupported: ' + flvjs.isSupported());var mediaDataSource = {type: 'flv'};var server = window.location.hostname;mediaDataSource['url'] = "http://" + server + "/flv?port=1935&app=camera&stream=video0";console.log('MediaDataSource', mediaDataSource);flv_load_mds(mediaDataSource); }function flv_load_mds(mediaDataSource) {var element = document.getElementsByName('videoElement')[0];if (typeof player !== "undefined") {if (player != null) {player.unload();player.detachMediaElement();player.destroy();player = null;}}player = flvjs.createPlayer(mediaDataSource, {enableWorker: false,lazyLoadMaxDuration: 3 * 60,seekType: 'range',});player.attachMediaElement(element);player.load();}function flv_start() {flv_load();player.play();}function flv_pause() {player.pause();}

js功能实现部分:

layui.use('form', function () {var form = layui.form;form.on('switch(preview_enable)',function(){   if ($.trim($('#preview_enable').is(":checked")) == 'true') {flv_start();}else {flv_pause();}});
});

完结,撒花!

基于Bilibili开源flv.js拉流相关推荐

安卓基于SRS的Webrtc推拉流
安卓基于SRS的Webrtc推拉流文章目录安卓基于SRS的Webrtc推拉流 Https必须需要域名 httpx-static 配置 https 代理基于SRS 配置文件支持 https And ...
H5网页播放flv格式拉流直播视频
import flvjs from 'flv.js' <template><div><videoref="videoElement"id=" ...
Linux(ubuntu)搭建基于nginx-http-flv-module的视频推拉流服务器
前言上篇说到基于MacOS的服务器搭建,是自己在本地电脑上的小尝试,真正用的时候还是要上linuxOS 的,下面来看下ubuntu系统的搭建过程. 正文环境准备操作系统: Ubuntu 16.0 ...
流媒体方案，技术开源项目，包含Java调用FFMpeg(FFCH4J)，推拉流服务器，nginx-http-flv-module，ckplayer，Flv.js，EasyPlayer.js集成
文章目录 streaming_media 介绍 ckplayer拉流播放软件介绍功能介绍软件架构安装教程使用说明 EasyPlayer.js拉流播放简介功能说明集成使用示例普通集成 ...
LiveNVR拉流视频流媒体平台如何解决JS|axios调用接口时遇到的跨域问题
LiveNVR拉流视频流媒体平台如何解决JS|axios调用接口时遇到的跨域问题 1.JS调用遇到跨域解决示例 2.axios请求接口遇到跨域问题 2.1.post请求 2.2.get请求 3.RTS ...
Nginx-http-flv-module流媒体服务器搭建+模拟推流+flv.js在前端html和Vue中播放HTTP-FLV视频流
场景 Windows上搭建Nginx RTMP服务器并使用FFmpeg实现本地视频推流: Windows上搭建Nginx RTMP服务器并使用FFmpeg实现本地视频推流_win nginx-rtmp ...
LiveNVR Onvif/RTSP流媒体软件接入监控摄像头后如何获取直播流地址进行大屏展示、播放端拉流、网页播放监控视频等...
1.LiveNVR介绍 LiveNVR的安防监控的视频直播,可以按标准的Onvif/RTSP协议接入监控设备,也可以通过海康.大华.天地伟业等厂家私有SDK接入监控,实现web页面的播放和录像回放. ...
java 阿里云直播配置及推拉流地址获取
一.开通阿里云直播首先进入阿里云直播产品主页:https://www.aliyun.com/product/live . 点击下方的"立即开通". 如果是还未注册的用户请按照页面 ...
uniapp h5直播拉流的几种方法 flv.js， video.js，阿里播放器sdk，video标签
uniapp h5直播拉流的几种方法 flv.js, video.js, 阿里播放器sdk,video标签前言首先引入资源文件需要创建index.html 模板文件 flv.js video.j ...
uni-app H5使用flv.js直播拉流
安装flv.js npm install flv.js 页面内引入代码 <template><view><view id="myPlayer" ref ...

基于Bilibili开源flv.js拉流

基于Bilibili开源flv.js拉流相关推荐

最新文章

热门文章