React 基于antd+video.js实现m3u8格式视频播放及实时切换
文档连接地址（官网看起麻烦,看中文别人整理好的）https://blog.csdn.net/a0405221/article/details/80923090
video.js使用技巧 http://www.mamicode.com/info-detail-2259727.html
React项目使用 video.js
安装依赖
npm install --save video.js
引入
import 'video.js/dist/video-js.min.css' import videojs from 'video.js'
index.js（注释掉的你不用）
import React from 'react'
import {
Modal,
Form,
Col,
Row,
Input,
Button,
Card,
Select,
Table,
message
} from 'antd'
import PropTypes from 'prop-types'
import styles from './style.less'
// import { arrayToTree } from 'utils'
import { connect } from 'dva'
// import { request } from 'utils'
import 'video.js/dist/video-js.min.css'
import videojs from 'video.js'
// const columnsOrg = [
// {
// title: '名称',
// dataIndex: 'nodeName',
// key: 'id'
// }
// ]
// const FormItem = Form.Item
// const { Option } = Select
// const { TextArea } = Input
// const formItemLayout = {
// labelCol: {
// xs: { span: 6 },
// sm: { span: 6 }
// },
// wrapperCol: {
// xs: { span: 18 },
// sm: { span: 18 }
// }
// }
class TaskScheduling extends React.Component {
constructor(props) {
super(props)
this.state = {
// data: {},
// fileList: [],
// id: null,
url: ''
}
}
componentDidMount(url, bool) {
const { location } = this.props
this.getEvent(location.state.id)
var myVideo = videojs('myVideo', {
bigPlayButton: true,
textTrackDisplay: false,
posterImage: false,
errorDisplay: false
})
myVideo.play()
if (url) {
this.setState({
url
})
if (/\.m3u8$/.test(url)) {
myVideo.src({
src: url,
type: 'application/x-mpegURL'
})
} else {
myVideo.src(url)
}
myVideo.load()
myVideo.play()
}
if (bool === false) {
myVideo.pause()
// myVideo.dispose()
}
}
componentWillUnmount() {
if (this.player) {
this.player.dispose()
}
}
// handleSubmit = () => {
// const { form } = this.props
// form.validateFields((err, formValue) => {
// if (err) {
// return
// }
// const { taskScheduling } = this.props
// const { postType } = taskScheduling
// const { data } = this.state
// if (postType) {
// this.props.dispatch({
// //提交
// type: 'taskScheduling/eventPost',
// payload: {
// ...formValue,
// id: data.id,
// taskId: data.taskId,
// procInstId: data.procInstId,
// taskKey: data.taskKey,
// userId: data.userId
// }
// })
// } else {
// this.props.dispatch({
// //归档
// type: 'taskScheduling/processingFiling',
// payload: {
// ...formValue,
// id: data.id,
// taskId: data.taskId,
// procInstId: data.procInstId,
// taskuser: '',
// taskKey: data.taskKey,
// userId: data.userId
// }
// })
// }
// })
// }
// 关闭
// hideModal() {
// this.props.dispatch({
// type: 'taskScheduling/taskSchedulingUpdate',
// payload: {
// visible: false,
// formVisible: false,
// postType: false,
// taskSchedulingData: []
// }
// })
// }
// showModal(item) {
// this.props.dispatch({
// type: 'taskScheduling/taskSchedulingUpdate',
// payload: {
// ...item
// }
// })
// if (item.postType) {
// this.props.dispatch({
// type: 'taskScheduling/getUsers',
// payload: {
// id: Number(this.state.id)
// }
// })
// }
// if (item.visible === false) {
// this.componentDidMount('', item.visible)
// }
// } // getEvent = async _id => {
// let data = {
// id: _id
// }
// const res = await request('aaaaa', {
// data
// })
// if (res.success) {
// this.setState({
// data: res.data || {},
// fileList: res.data.fileList,
// id: res.data.id
// })
// }
// } render() {
const { form, taskScheduling } = this.props
const { data, fileList, url } = this.state
const {
visible,
// formVisible,
// postType,
// userData,
// taskSchedulingData
} = taskScheduling
// const { getFieldDecorator } = form
// let dataTree = arrayToTree(taskSchedulingData, 'id', 'parentId')
return (
<Row className="custom-style">
{/* <Col span={8}>
<Card
extra={
<Button
type="primary"
onClick={() => this.showModal({ visible: true })}
>
视频调看
</Button>
}
>
<Form>
<Row>
<Col span={20}>
<FormItem label="工单编号" {...formItemLayout}>
{getFieldDecorator('eventCode', {
initialValue: data.eventCode
})(<Input disabled />)}
</FormItem>
</Col>
<Col span={20}>
<FormItem label="网格名称" {...formItemLayout}>
{getFieldDecorator('gridName', {
initialValue: data.gridName
})(<Input disabled />)}
</FormItem>
</Col>
<Col span={20}>
<FormItem label="事件地址" {...formItemLayout}>
{getFieldDecorator('address', {
initialValue: data.address
})(<Input disabled />)}
</FormItem>
</Col>
<Col span={20}>
<FormItem label="事件内容" {...formItemLayout}>
{getFieldDecorator('eventDesc', {
initialValue: data.eventDesc
})(<TextArea disabled />)}
</FormItem>
</Col>
<Col span={20}>
<FormItem label="照片" {...formItemLayout}>
{getFieldDecorator('code', {})(
<div className={styles.formImg}>
{fileList.map((_item, index) => {
return (
<img
key={index}
src={`http://10.0.202.47/static${_item}`}
alt="事件图像"
/>
)
})}
</div>
)}
</FormItem>
</Col>
</Row>
<Row className={styles.buttonPosition}>
<Button
type="primary"
onClick={() => this.showModal({ formVisible: true })}
>
处理并归档
</Button>
<Button
type="primary"
onClick={() =>
this.showModal({ formVisible: true, postType: true })
}
>
提交
</Button>
</Row>
</Form>
</Card>
</Col> */}
<Col span={15} offset={1}>
<Card
title={<span>视频调度</span>}
style={{
visibility: visible ? 'visible' : 'hidden'
}}
>
<div className={styles.video}>
{/* <Table
style={{
width: 260
}}
rowKey="id"
className="table-tree"
pagination={false}
columns={columnsOrg}
dataSource={dataTree}
onRow={record => {
return {
onClick: () => {
let id = record.id.split('-')
if (record.nodeType === '6') {
this.props
.dispatch({
type: 'taskScheduling/queryEquipment',
payload: {
id: Number(id.slice(-1))
}
})
.then(res => {
this.componentDidMount(res.data.url)
})
} else {
message.info('只能选择设备查看')
}
}
}
}}
/> */}
<div
style={{
minWidth: 700
}}
>
<video
id="myVideo"
class="video-js vjs-default-skin vjs-big-play-centered"
controls
preload="auto"
data-setup="{}"
style={{
width: '40vw',
height: 500
}}
>
<source id="source" src={url} type="application/x-mpegURL" />
</video>
</div>
</div>
<Row>
<Button
style={{
float: 'right',
margin: 10
}}
type="primary"
onClick={() => {
this.showModal({ visible: false })
}}
>
关闭
</Button>
</Row>
</Card>
</Col>
{/* <Modal
title="事件处理"
visible={formVisible}
onOk={this.handleSubmit}
onCancel={() => this.hideModal()}
>
<Form>
{postType && (
<FormItem label="处理人" {...formItemLayout}>
{getFieldDecorator('taskuser', {})(
<Select>
{userData.map((item, index) => {
return (
<Option key={index} value={item.id}>
{item.userName}
</Option>
)
})}
</Select>
)}
</FormItem>
)}
<FormItem label="处理意见" {...formItemLayout}>
{getFieldDecorator('comment', {})(<TextArea />)}
</FormItem>
</Form>
</Modal> */}
</Row>
)
}
}
TaskScheduling.propTypes = {
form: PropTypes.object,
dispatch: PropTypes.func,
taskSchedulingData: PropTypes.object
} export default connect(({ taskScheduling }) => ({
taskScheduling
}))(Form.create()(TaskScheduling))
import React from 'react'
import {
Modal,
Form,
Col,
Row,
Input,
Button,
Card,
Select,
Table,
message
} from 'antd'
import PropTypes from 'prop-types'
import styles from './style.less'
// import { arrayToTree } from 'utils'
import { connect } from 'dva'
// import { request } from 'utils'
import 'video.js/dist/video-js.min.css'
import videojs from 'video.js'
// const columnsOrg = [
// {
// title: '名称',
// dataIndex: 'nodeName',
// key: 'id'
// }
// ]
// const FormItem = Form.Item
// const { Option } = Select
// const { TextArea } = Input
// const formItemLayout = {
// labelCol: {
// xs: { span: 6 },
// sm: { span: 6 }
// },
// wrapperCol: {
// xs: { span: 18 },
// sm: { span: 18 }
// }
// }
class TaskScheduling extends React.Component {
constructor(props) {
super(props)
this.state = {
// data: {},
// fileList: [],
// id: null,
url: ''
}
}
componentDidMount(url, bool) {
const { location } = this.props
this.getEvent(location.state.id)
var myVideo = videojs('myVideo', {
bigPlayButton: true,
textTrackDisplay: false,
posterImage: false,
errorDisplay: false
})
myVideo.play()
if (url) {
this.setState({
url
})
if (/\.m3u8$/.test(url)) {
myVideo.src({
src: url,
type: 'application/x-mpegURL'
})
} else {
myVideo.src(url)
}
myVideo.load()
myVideo.play()
}
if (bool === false) {
myVideo.pause()
// myVideo.dispose()
}
}
componentWillUnmount() {
if (this.player) {
this.player.dispose()
}
}
// handleSubmit = () => {
// const { form } = this.props
// form.validateFields((err, formValue) => {
// if (err) {
// return
// }
// const { taskScheduling } = this.props
// const { postType } = taskScheduling
// const { data } = this.state
// if (postType) {
// this.props.dispatch({
// //提交
// type: 'taskScheduling/eventPost',
// payload: {
// ...formValue,
// id: data.id,
// taskId: data.taskId,
// procInstId: data.procInstId,
// taskKey: data.taskKey,
// userId: data.userId
// }
// })
// } else {
// this.props.dispatch({
// //归档
// type: 'taskScheduling/processingFiling',
// payload: {
// ...formValue,
// id: data.id,
// taskId: data.taskId,
// procInstId: data.procInstId,
// taskuser: '',
// taskKey: data.taskKey,
// userId: data.userId
// }
// })
// }
// })
// }
// 关闭
// hideModal() {
// this.props.dispatch({
// type: 'taskScheduling/taskSchedulingUpdate',
// payload: {
// visible: false,
// formVisible: false,
// postType: false,
// taskSchedulingData: []
// }
// })
// }
// showModal(item) {
// this.props.dispatch({
// type: 'taskScheduling/taskSchedulingUpdate',
// payload: {
// ...item
// }
// })
// if (item.postType) {
// this.props.dispatch({
// type: 'taskScheduling/getUsers',
// payload: {
// id: Number(this.state.id)
// }
// })
// }
// if (item.visible === false) {
// this.componentDidMount('', item.visible)
// }
// }
// getEvent = async _id => {
// let data = {
// id: _id
// }
// const res = await request('/activiti/api/sgEvent/getSgEvent', {
// data
// })
// if (res.success) {
// this.setState({
// data: res.data || {},
// fileList: res.data.fileList,
// id: res.data.id
// })
// }
// }
render() {
const { form, taskScheduling } = this.props
const { data, fileList, url } = this.state
const {
visible,
// formVisible,
// postType,
// userData,
// taskSchedulingData
} = taskScheduling
// const { getFieldDecorator } = form
// let dataTree = arrayToTree(taskSchedulingData, 'id', 'parentId')
return (
<Row className="custom-style">
{/* <Col span={8}>
<Card
extra={
<Button
type="primary"
onClick={() => this.showModal({ visible: true })}
>
视频调看
</Button>
}
>
<Form>
<Row>
<Col span={20}>
<FormItem label="工单编号" {...formItemLayout}>
{getFieldDecorator('eventCode', {
initialValue: data.eventCode
})(<Input disabled />)}
</FormItem>
</Col>
<Col span={20}>
<FormItem label="网格名称" {...formItemLayout}>
{getFieldDecorator('gridName', {
initialValue: data.gridName
})(<Input disabled />)}
</FormItem>
</Col>
<Col span={20}>
<FormItem label="事件地址" {...formItemLayout}>
{getFieldDecorator('address', {
initialValue: data.address
})(<Input disabled />)}
</FormItem>
</Col>
<Col span={20}>
<FormItem label="事件内容" {...formItemLayout}>
{getFieldDecorator('eventDesc', {
initialValue: data.eventDesc
})(<TextArea disabled />)}
</FormItem>
</Col>
<Col span={20}>
<FormItem label="照片" {...formItemLayout}>
{getFieldDecorator('code', {})(
<div className={styles.formImg}>
{fileList.map((_item, index) => {
return (
<img
key={index}
src={`http://10.0.202.47/static${_item}`}
alt="事件图像"
/>
)
})}
</div>
)}
</FormItem>
</Col>
</Row>
<Row className={styles.buttonPosition}>
<Button
type="primary"
onClick={() => this.showModal({ formVisible: true })}
>
处理并归档
</Button>
<Button
type="primary"
onClick={() =>
this.showModal({ formVisible: true, postType: true })
}
>
提交
</Button>
</Row>
</Form>
</Card>
</Col> */}
<Col span={} offset={}>
<Card
title={<span>视频调度</span>}
style={{
visibility: visible ? 'visible' : 'hidden'
}}
>
<div className={styles.video}>
{/* <Table
style={{
width: 260
}}
rowKey="id"
className="table-tree"
pagination={false}
columns={columnsOrg}
dataSource={dataTree}
onRow={record => {
return {
onClick: () => {
let id = record.id.split('-')
if (record.nodeType === '6') {
this.props
.dispatch({
type: 'taskScheduling/queryEquipment',
payload: {
id: Number(id.slice(-1))
}
})
.then(res => {
this.componentDidMount(res.data.url)
})
} else {
message.info('只能选择设备查看')
}
}
}
}}
/> */}
<div
style={{
minWidth:
}}
>
<video
id="myVideo"
class="video-js vjs-default-skin vjs-big-play-centered"
controls
preload="auto"
data-setup="{}"
style={{
width: '40vw',
height:
}}
>
<source id="source" src={url} type="application/x-mpegURL" />
</video>
</div>
</div>
<Row>
<Button
style={{
float: 'right',
margin:
}}
type="primary"
onClick={() => {
this.showModal({ visible: false })
}}
>
关闭
</Button>
</Row>
</Card>
</Col>
{/* <Modal
title="事件处理"
visible={formVisible}
onOk={this.handleSubmit}
onCancel={() => this.hideModal()}
>
<Form>
{postType && (
<FormItem label="处理人" {...formItemLayout}>
{getFieldDecorator('taskuser', {})(
<Select>
{userData.map((item, index) => {
return (
<Option key={index} value={item.id}>
{item.userName}
</Option>
)
})}
</Select>
)}
</FormItem>
)}
<FormItem label="处理意见" {...formItemLayout}>
{getFieldDecorator('comment', {})(<TextArea />)}
</FormItem>
</Form>
</Modal> */}
</Row>
)
}
}
TaskScheduling.propTypes = {
form: PropTypes.object,
dispatch: PropTypes.func,
taskSchedulingData: PropTypes.object
}
export default connect(({ taskScheduling }) => ({
taskScheduling
}))(Form.create()(TaskScheduling))
React 基于antd+video.js实现m3u8格式视频播放及实时切换的更多相关文章
- video.js支持m3u8格式直播
为什么要使用video.js? 1. PC端浏览器并不支持video直接播放m3u8格式的视频 2. 手机端各式各样的浏览器定制的video界面风格不统一,直接写原生的js控制视频兼容性较差 3. v ...
- 流媒体测试笔记记录之————解决问题video.js 播放m3u8格式的文件,根据官方的文档添加videojs-contrib-hls也不行的原因解决了
详细代码Github:https://github.com/Tinywan/PHPSharedLibrary/tree/master/Tpl/Html5/VideoJS 想播放hls协议的就是m3u8 ...
- 流媒体技术学习笔记之（四）解决问题video.js 播放m3u8格式的文件,根据官方的文档添加videojs-contrib-hls也不行的原因解决了
源码地址:https://github.com/Tinywan/PHP_Experience 总结: 说明: 测试环境:本测试全部来自阿里云直播和OSS存储点播以及本地服务器直播和点播 播放器:Vid ...
- html页面引用video.js播放m3u8格式视频
//head里面的内容,我是采用cdn引用的方式,因为项目太小 <head> <meta charset="utf-8" /> <title>二 ...
- vue使用video.js解决m3u8视频播放格式
今天被这个关于m3u8视频播放不了搞了一下午,这个项目所有的视频流都是m3u8格式的,后台给我们返回的都是m3u8格式的视频流,解决了好长时间,看了好多博客,只有这个博客给我点启发,去解决这个问题,请 ...
- 微信 vue中使用video.js播放m3u8视频，解决安卓自动全屏的问题。
最近一个项目中需要在微信中播放m3u8格式的视频,刚开始用了 vue-video-player 这个插件,在IOS手机体验良好,本以为完事了, 结果安卓手机一点播放就自动全屏,心态略崩.查了资料说是安 ...
- vue中通过hls.js播放m3u8格式的视频
近期做了一个功能,是接入一个海康的摄像头的监控视频,怎么获取m3u8的视频这里就不在叙述了,只说一下怎么将m3u8格式的视频成功播放 一.m3u8和HLS介绍 1.M3U8文件是指UTF-8编码格式的 ...
- 移动端播放直播流（video.js 播放 m3u8 流）
流媒体服务器: wowza 流媒体格式: m3u8 播放端:移动端网页(Android.IOS) 播放工具: video.js 代码如下: <!DOCTYPE html> <html ...
- 使用video.js支持flv格式
html5的video标签只支持mp4.webm.ogg三种格式,不支持flv格式,在使用video.js时,如果使用html5是会报错不支持. 修改了一下代码 js部分 videojs.option ...
随机推荐
- 使用JMH做Benchmark基准测试
目录 BenchMark介绍 开始前的步骤 例子 代码 报告 注解介绍 @BenchmarkMode @OutputTimeUnit @Iteration @WarmUp @State @Fork @ ...
- XAML与C#与WPF三者到底有什么关系?
XAML是.NET体系开发程序或者网页时前台编程的一种布局方式或者说开发语言,可以比较自由的用标签的方式进行布局,借鉴了HTML和XML等语言的风格,并且加入了一些动画等的实现.C#则是后台逻辑开发用 ...
- 使用http3访问服务
用到的包:import okhttp3.OkHttpClient;import okhttp3.Request;import okhttp3.Response; 主要代码: try { //创建OkH ...
- 使用kubectl管理k8s集群（二十九）
前言 在搭建k8s集群之前,我们需要先了解下kubectl的使用,以便在集群部署出现问题时进行检查和处理.命令和语法记不住没有关系,但是请记住主要的语法和命令以及帮助命令的使用. 在下一篇,我们将讲述 ...
- Vue状态管理之Bus
一般在项目中,状态管理都是使用Vue官方提供的Vuex 当在多组件之间共享状态变得复杂时,使用Vuex,此外也可以使用Bus来进行简单的状态管理 1.1 父组件与子组件之间的通信 vue.config ...
- Java 8 终于支持 Docker！
Java 8曾经与Docker无法很好地兼容性,现在问题已消失. 请注意:我在本文中使用采用GNU GPL v2许可证的OpenJDK官方docker映像.在Oracle Java SE中,这里描述的 ...
- Excel催化剂开源第12波-VSTO开发遍历功能区所有菜单按钮及自定义函数清单
在插件开发过程中,随着功能越来越多,用户找寻功能入口将变得越来越困难,在Excel催化剂 ,将采用遍历所有功能的方式,让用户可以轻松使用简单的查找功能找到想要功能所在位置,查找的范围有:功能按钮的显示 ...
- [leetcode] 96 Unique Binary Search Trees (Medium)
原题 字母题 思路: 一开始妹有一点思路,去查了二叉查找树,发现有个叫做卡特兰数的东西. 1.求可行的二叉查找树的数量,只要满足中序遍历有序. 2.以一个结点为根的可行二叉树数量就是左右子树可行二叉树 ...
- 科密指纹考勤机B329采集
昨天项目用到了科密指纹考勤机B329. 暂记录下碰到的问题,及其解决办法,以备查询. 1.下载科密的二次开发包SDK“10079” .地址:( http://pan.baidu.com/s/1i39m ...
- php上传excle文件，csv文件解析为二维数组
解析上传的CSV文件不是什么难事,直接读取转成你想要的数组样子就OK了. public function putStoreStockIn ($filePath = '') { $file = fope ...