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 ...
随机推荐
- Kafka集群部署指南
一.前言 1.Kafka简介 Kafka是一个开源的分布式消息引擎/消息中间件,同时Kafka也是一个流处理平台.Kakfa支持以发布/订阅的方式在应用间传递消息,同时并基于消息功能添加了Kafka ...
- win10win7office系列激活工具 KMSAuto Net 2016 v1.5.4 绿色便携版
下载地址:点我 KMSpico又称KMS激活工具,KMSpico是目前成功且经常更新的Windows激活工具,可以激活任何版本的window系统和任何版本的Office软件,即使是win8和offic ...
- .Net Core 防止跨站点请求伪造
一.在From 表单中生成 antiforgery 令牌 1. ASP.NET Core MVC 和 Razor 页模板中的窗体的所有生成 antiforgery 令牌,唯一且不可预测.服务器先发送到 ...
- 【POJ - 2676】Sudoku（数独 dfs+回溯）
-->Sudoku 直接中文 Descriptions: Sudoku对数独非常感兴趣,今天他在书上看到了几道数独题: 给定一个由3*3的方块分割而成的9*9的表格(如图),其中一些表格填有1- ...
- CAD2014学习笔记-图层图案图块
基于 虎课网huke88.com CAD教程 对象特性 选择对象点击特性栏/或右键点击特性 颜色:color 图层 线型:线的类型,如点状线.虚线等,若不改变则默认新建的线为该类型 线型比例:不同类型 ...
- .NET多线程之调用上下文CallContext
命名空间:System.Runtime.Remoting.Messaging 类型完全限定名称:System.Runtime.Remoting.Messaging.CallContext 官方介绍:h ...
- MyBatis：choose标签的用法
<!-- 4.2 choose用法 需求: 在已有的sys_user表中,除了主键id外,我们认为user_name也是唯一的, 所有的用户名都不可以重复.现在进行如下查询:当参数id有值的时候 ...
- [原创]JAVA解决喝汽水问题
问题:一瓶汽水单价2.5元,四个瓶盖或者两个瓶子可以换取一瓶汽水.给定金额得出一共能喝几瓶汽水? 实现: #cat drink.java import java.io.BufferedReader; ...
- NOIp 2018 普及&提高组试题答案
你们考的咋样呢?在评论区说出自己的分数吧!
- 小代学Spring Boot之自定义Starter
想要获取更多文章可以访问我的博客 - 代码无止境. 上一篇小代同学在Spring Boot项目中配置了数据源,但是通常来讲我们访问数据库都会通过一个ORM框架,很少会直接使用JDBC来执行数据库操作的 ...