文档连接地址（官网看起麻烦,看中文别人整理好的）https://blog.csdn.net/a0405221/article/details/80923090
React项目使用
安装依赖
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(‘/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={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))
原文地址：https://www.cnblogs.com/gcm123/p/11320160.html
时间： 2024-08-12 01:20:45