react项目使用antDesign--Upload标签上传视频至腾讯云与引用腾讯云SDK超级播放器实现视频播放
react+antd+腾讯云上传视频
--先引入腾讯云SDK，具体可查看：腾讯云-云点播官方文档
<script src="https://cdn-go.cn/cdn/vod-js-sdk-v6/latest/vod-js-sdk-v6.js"></script>
---上传组件
render() {
const {voidType,proPrecent,upVoidType} = this.state;
return (
<Upload
name="file" // action={`${location.origin}url`} // headers={{ // token: storage.get('tokenValue') ? storage.get('tokenValue') : null, // }} listType="picture-card" // fileList={fileList} onChange={this.uploadVideo}//上传文件改变时的状态 beforeUpload={this.sidebarIconHandleUpload()} > <div style={{ fontSize: '0.14rem' }}> <div> <Icon type="plus" /> </div> <div>选择上传视频</div> </div> </Upload> {voidType&& <div className='videProgress'> <div>{upVoidType==1?'上传中':upVoidType==2?'上传成功':upVoidType==3?'上传失败':'请选择视频'}</div> <Progress percent={proPrecent} status="active" /> </div> }
);
}
---上传事件处理
//视频处理 sidebarIconHandleUpload = () => { const {fileSizeValue,fileSizeText,beforeUploadFun} = this.props; const _this = this; return file => { const { dispatch } = this.props; _this.setState({ proPrecent: 0, voidType: true, upVoidType: 1, }) return false; }; }; //获取签名 getSignature=(info)=> { let media_type = (info.file.type === '' && (info.file.name.substring(info.file.name.lastIndexOf('.')+1)).toLowerCase() === 'flv') ? 'FLV' : 'MP4'; // let obj = JSON.stringify({appid:liveInfo.id,file_name:info.fileList[info.fileList.length-1].name,media_type:media_type,SecretId:SecretId,Signature:signature}); return request('url', { //请求后台的接口 接收签名 method: 'get',//请求方式可更改 headers: {'Content-Type':'application/json'}, // body: obj, dataType:'json', }).then((res) => { return res.data; }) }; //上传视频 upload组件发生变化的时候自动触发 uploadVideo = (info) => { let newInfo = []; let flvType = ''; info.fileList.forEach(item=>{ if(item.type === 'video/mp4' || ((item.name.substring(item.name.lastIndexOf('.')+1)).toLowerCase() === 'flv' && item.type === '')){ newInfo.push(item) } }) info.fileList = newInfo; //过滤上传的视频 把不符合条件的给过滤掉 从最后一个开始上传 防止用户中间上传不符合条件的文件 const isMP4 = info.file.type === 'video/mp4'; const isFLV = info.file.type === '' && (info.file.name.substring(info.file.name.lastIndexOf('.')+1)).toLowerCase() === 'flv'; //MP4 FLV符合一个即可 // if (!((!isMP4 && isFLV) || (isMP4 && !isFLV))) { // message.error('只能上传mp4或者flv格式'); // return false; // } const isLt3G = info.file.size < 3 * 1024 * 1024 *1024; if (!isLt3G) { message.error('文件大小必须小于 3G!'); return false; } let that = this; const {liveInfo} = this.props; const tcVod = new TcVod.default({ getSignature:()=>{ return that.getSignature(info) } }) const uploader = tcVod.upload({ mediaFile: info.fileList[0].originFileObj, // 媒体文件（视频或音频或图片），类型为 File }) //上传进度 控制进度条的进度 ps:upload采用手动上传之后 组件自带的进度条消失了(暂时没找到解决办法,所以自己用了一个外部的进度条控制) uploader.on('media_progress', function(info) { let percent = parseInt(info.percent * 100); // console.log('percent:',percent); that.setState({ proPrecent: percent, voidType: true, upVoidType: 1, }) }) //上传完成 uploader.done().then(function (doneResult) { // deal with doneResult // console.log('doneResultIf:',doneResult); if(doneResult.fileId){ // console.log('doneResult:',doneResult) that.setState({ voidType: true, upVoidType: 2, fileId: doneResult.fileId, videoUrl: doneResult.video.url, }) } }).catch(function (err) { console.log(err) message.error('上传失败') that.setState({ voidType: true, upVoidType: 3, }) }) }
react+腾讯云(云点播超级播放器)实现视频播放
--先引入腾讯云SDK，具体可查看：腾讯云-云点播超级播放器官方文档
<!-- 以下引入视频播放器脚本 --> <link href="https://web.sdk.qcloud.com/player/tcplayer/release/v4.2.1/tcplayer.min.css" rel="stylesheet"/>
<!--如果需要在 Chrome 和 Firefox 等现代浏览器中通过 H5 播放 HLS 格式的视频，需要在 tcplayer.v4.2.min.js 之前引入 hls.min.0.13.2m.js。--> <script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.5.2/libs/hls.min.0.13.2m.js"></script> <!--播放器脚本文件--> <script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.5.2/tcplayer.v4.5.2.min.js"></script>
--视频播放实现
export default class VideoModal extends Component { state={ videoId: (parseInt(Math.random() * 10000000)).toString(),//生成随机整数 } componentDidMount() { const {visibleValue,videoUrl,fileId} = this.props; const {videoId} = this.state; if(videoUrl){
//通过ref获取DOM设置id
//根据视频id与随机整数生成唯一id,当二次点击播放视频时，生成新的初始化播放器
const player = TCPlayer(this.playerContainerId.id, {}); // player-container-id 为播放器容器 ID，必须与 html 中一致 player.src(videoUrl); // url 播放地址 } } render() { const {visibleValue,onCancelFun,fileId} = this.props; const {videoId} = this.state; return ( <div> <Modal visible={visibleValue} ref={modalRef=>this.modalRefId=modalRef} closable={false} width="6rem" bodyStyle={{display:'flex',alignItems:'center',padding: '0.24rem',fontSize:'0.16rem'}} onCancel={()=>onCancelFun()} maskClosable={false}//点击蒙层是否允许关闭 getContainer={false}//false 为挂载在当前 dom footer={<div style={{width:'100%',display:'flex',alignItems:'center',justifyContent:'center'}}> <Button onClick={()=>onCancelFun()} type="primary" >关闭</Button> </div>} destroyOnClose={false}//关闭时销毁 Modal 里的子元素 > <video id={`player_${fileId + videoId}`}//根据视频id与随机整数生成唯一id,当二次点击播放视频时，生成新的初始化播放器 ref={videoRef=>this.playerContainerId=videoRef} width="550" height="320" preload="auto" // playsinline={1} // webkit-playsinline={1} > </video> </Modal> </div> ); } }
