React 基于antd+video.js实现m3u8格式视频播放及实时切换

文档连接地址（官网看起麻烦,看中文别人整理好的）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))