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 = { 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))