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 ...
随机推荐
- 1、Java简介
Java SE: 最基础的部分,java的标准版本: Java EE: 企业版,(JSP.EJB.服务) Java ME:移动设备.游戏.通信 JVM: java virtual machine ...
- scrapy基础知识之 RedisCrawlSpider：
这个RedisCrawlSpider类爬虫继承了RedisCrawlSpider,能够支持分布式的抓取.因为采用的是crawlSpider,所以需要遵守Rule规则,以及callback不能写pars ...
- 『开发技术』Docker开发教程（一）安装与测试（Windows 家庭版）
0.前言 针对其他系统和版本,Docker都很容易安装,可以参考官方教程:https://docs.docker.com/docker-hub/ 由于Windows10家庭版无法安装docker,因此 ...
- PHP---微信JS-SDK获取access_token/jsapi_ticket/signature权限签名算法,php/thinkphp实现微信分享自定义文字和图片
PHP---微信JS-SDK获取access_token/jsapi_ticket/signature权限签名算法, php/thinkphp实现微信分享自定义文字和图片. 一.先看微信JS-SDK文 ...
- 个人永久性免费-Excel催化剂插件功能修复与更新汇总篇之九
第11波-快速批量插入图片并保护纵横比不变 原文链接:https://www.jianshu.com/p/9a3d9aa7ba7e 修复了插入图片有纵向的图片时,插入后还是显示横向的情况. 第83波- ...
- TensorFlow笔记-线程和队列
线程和队列 在使用TensorFlow进行异步计算时,队列是一种强大的机制. 为了感受一下队列,让我们来看一个简单的例子.我们先创建一个“先入先出”的队列(FIFOQueue),并将其内部所有元素初始 ...
- docker实战（二）之redis的使用
docker中安装redis的步骤比较简单,Linux系统版本centos7.4 1.官方仓库https://hub.docker.com/r/library/redis/tags/中查看redis的 ...
- hdu6383 p1m2(二分答案)
p1m2 题目传送门 解题思路 因为x都是非负数,且每一次操作其实就是把总和减少了1,所以可以得出最后都可以到达稳定.最后稳定的数的下界是0,最大也不会超过其初始数的最大值,所以可以用二分答案来求解. ...
- linux初学者-系统服务的控制
linux系统中系统服务的控制是比较重要的一部分,这也直接影响到计算机的使用,以下将会介绍一些系统服务的控制. 1.系统服务命令 系统的初始化程序是系统开始的第一个进程,pid为1.可以通过以下命 ...
- Codeforces1144D(D题）Equalize Them All
D. Equalize Them All You are given an array aa consisting of nn integers. You can perform the follow ...