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

Posted 2022-06-19 gcm123

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