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 ...
随机推荐
- mysql远程连接设置
mysql远程连接设置只需要把mysql数据库的user表中的localhost改成%就可以远程连接了. 值得提醒的是:开发阶段可以打开,生产的时候尽量关闭,因为本人就遇到别人通过这个把我数据库给删的 ...
- 视图系统CBV 和 response
CBV和FBV FBV(function based view ) CBV(class based view) 1. CBV的定义 # 增加出版社 CBV from django.views imp ...
- Perm排列计数（新博客试水，写的不好，各路大神见谅）
B. Perm 排列计数 内存限制:512 MiB 时间限制:1000 ms 标准输入输出 题目描述 称一个1,2,...,N的排列P1,P2...,Pn是Magic的,当且仅当2<=i&l ...
- ~~Python文件简单操作~~
进击のpython Python文件操作 在说Python的文件操作之前 我们可以先思考一个问题 平时我们是怎么对电脑中的文件进行操作的呢? 打开电脑⇨找到文件⇨打开文件⇨读文件⇨修改文件⇨保存文件⇨ ...
- 学习 Python 心得
脚本式编程: 通过脚本参数调用解释器开始执行脚本,直到脚本执行完毕.当脚本执行完成后,解释器不再有效. 让我们写一个简单的 Python 脚本程序.所有 Python 文件将以 .py 为扩展名.将以 ...
- HTML表单部分学习笔记
第一部分: <!-- action :指定处理提交表单的格式 method :指定提交表单的http方法 enctype:指明用来把表单提交给服务器时的互联网媒体形式 --> <fo ...
- Shell学习心得（四）：流程控制
一.if else 1. if if 语句语法格式: if condition then command1 command2 ... commandN fi 写成一行(适用于终端命令提示符): ]; ...
- Socket 连接问题之大量 TIME_WAIT
简评:最近项目就出现了大量短连接导致建立新连接超时问题,最后是通过维护长连接解决的. 代理或者服务器设备都有端口限制,如果使用 TCP 连接,连接数量达到端口限制,在这种情况下,将不能创建新的连接. ...
- PHPStrom激活方法【亲测有效2018.4.23】
直接用浏览器打开 http://idea.lanyus.com/ 点击页面中的"获得注册码", 然后在注册时切换至Activation Code选项,输入获得的注册码一长串字符串 ...
- 利用TCP协议，实现基于Socket的小聊天程序(初级版)
TCP TCP (Transmission Control Protocol)属于传输层协议.其中TCP提供IP环境下的数据可靠传输,它提供的服务包括数据流传送.可靠性.有效流控.全双工操作和多路复用 ...