react项目中使用阿里播放器播放视频，包括切换视频，播放定时跳转（兼容ios和andro），播放完成

1.index.html引入阿里播放器的cdn

<link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.8.2/skins/default/aliplayer-min.css" />

2.创建播放器组件
需要播放器其他方法的可以参考阿里播放器SDK
阿里播放器SDK

import React from 'react';
import './style.less'
import { Tabs, Toast } from 'antd-mobile'export default class H5Video extends React.Component {constructor(props) {super(props);this.isLiving = false;}componentDidUpdate(prevProps) {//写在update是因为父组件切换视频时更新子组件if (!this.player) {this.setupPlayer();} else {// let isLiving = (this.props.liveInfo.liveStatus == 1);// if (this.isLiving == isLiving) {//   this.player.loadByUrl(this.props.liveInfo.m3u8PlayUrl);// }// else {//   this.player.dispose();//   document.querySelector('#J_prismPlayer').innerHTML = ''//   this.setupPlayer();// }if (this.props.sourceUrl) {if (prevProps.sourceUrl != this.props.sourceUrl) {//更新时的视频地址和正在播放的地址不一样时，才进行视频切换if (this.isIos()) {//移动端ios和andro的定时跳转不一样，并且调用video原生的currentTime是不会生效的this.player.loadByUrl(this.props.sourceUrl, this.props.playingTime)} else {//andro需要在设置了url以后，调用seek去设置播放时间this.player.loadByUrl(this.props.sourceUrl)this.player.seek(this.props.playingTime)}}}}}componentWillUnmount() {if (this.player) {//销毁播放器this.player.dispose();}}isIos() {//判断是不是iosvar u = navigator.userAgent,app = navigator.appVersion;var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //gvar isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端if (isIOS) {return true}return false}setupPlayer() {//创建播放器，就是一些自己需要的配置项let testUrl = this.props.sourceUrl;let defaultProps = {id: 'J_prismPlayer',source: '{"OD":"' + testUrl + '"}',autoplay: false,//移动端这个配置基本无效width: "100%",height: "100%",preload: true,//开启预加载// isLive: false,playsinline: true,//初始不全屏播放// useH5Prism: true,controlBarVisibility: 'click',//工具栏显示的出发条件// useFlashPrism: false,// x5_video_position: 'top',//prismplayer 2.0.1版本支持的属性，主要用户实现在android 微信上的同层播放// x5_type: 'h5', //vodRetry: 0, //失败重试次数cover: this.props.bannerImg,//移动端意义不大skinLayout: [//工具栏设置，根据自己的需求来配置，可参考官方文档{ name: "bigPlayButton", align: "cc" },{name: "H5Loading",align: "cc"},{ name: "errorDisplay", align: "tlabs", x: 0, y: 0 },{ name: "infoDisplay" },{ name: "tooltip", align: "blabs", x: 0, y: 56 },{ name: "thumbnail" },{name: "controlBar",align: "blabs",x: 0,y: 0,children: [{ name: "progress", align: "blabs", x: 0, y: 44 },{ name: "playButton", align: "tl", x: 15, y: 12 },{ name: "timeDisplay", align: "tl", x: 10, y: 7 },{ name: "fullScreenButton", align: "tr", x: 10, y: 12 },// { name: "setting", align: "tr", x: 15, y: 12 },]},]};let that = this;// eslint-disable-next-line no-undefthis.player = new Aliplayer(defaultProps, function () {setTimeout(() => {that.props.getPlayer(that.player)// let video = document.querySelector('video');// video.setAttribute("autoplay", true)}, 0);//初始化完成后返回播放器对象给父组件，一定要用setTimeout，否则会出问题});this.player.on('play', () => {if (this.props.playingTime >= Number(this.props.totalTime) * 60 - 1) {Toast.info('您已经完成本章节的学习', 1);}});}render() {return (<div style={{ opacity: this.props.sourceUrl ? 1 : 0 }} className="prism-player live-video" id="J_prismPlayer" ></div>);}
}
//opacity设置是必要的，因为父组件和播放器的初始化时异步的，播放器初始化完成时，如果没有有效的url，会出现报错的页面，用户体验不好。

3.父组件使用播放器组件

import H5video from '@/common/componnents/h5video'
//获取播放器对象const getPlayer = (player) => {if (player) {console.log(player)let map = player;map.current = player.tag;set_player(player)} else {Toast.fail('视频加载失败，请联系管理员')}}render() {return (<div ><H5videosourceUrl={playingVideoUrl}playingTime={playingTime||0}totalTime={totalTime||0}getPlayer={getPlayer} /></div>);}

对比了百度播放器以及腾讯播放器还有原生播放器，最后选择了阿里播放器，阿里播放器提供的方法更全面，比如倍速播放，百度播放器就不行。个人建议，仅供参考。

react项目中使用阿里播放器播放视频，包括切换视频，播放定时跳转（兼容ios和andro），播放完成相关推荐

在vue项目中使用阿里云播放器
在官方文档中分为HTML5和Flash两种播放模式我用的是html5的播放模式,下面是阿里云官方文档阿里云播放器的使用说明_视频点播-阿里云帮助中心首先在index.html文件中引入 <l ...
[react] React项目中使用阿里font-icon的svg形式
目录项目中查看在线链接添加icon样式使用icon 示例优雅一点后记项目中查看在线链接然后会生成一串.js的CDN链接,比如这样: 打开项目的index.html文件,添加script标 ...
前端React项目中实现萤石云ezuikit摄像头的播放与控制
最近要在react项目中使用萤石云提供的ezuikit库来接入萤石云摄像头,实现远程播放.控制移动.放大缩小等功能,首先百度搜类似的需求,搜不到,只能自己采坑,登萤石云官网,看对应文档. 一.登录萤石 ...
在vue项目中引用萤石云播放器插件
在vue项目中引用萤石云播放器插件 1. 萤石云官方开发文档: https://open.ys7.com/help/31 2. 登录官方网站:https://open.ys7.com/cn/s/ind ...
视频【解码】原理（播放器原理），音视频同步等
1.视频编码格式:H264, VC-1, MPEG-2, MPEG4-ASP (Divx/Xvid), VP8, MJPEG 等. 2.音频编码格式:AAC, AC3, DTS(-HD), True ...
react本地储存_如何在React项目中利用本地存储
react本地储存以及为什么要这么做. 本地存储是现代Web浏览器固有的Web API. 它允许网站/应用程序在浏览器中存储数据(简单和有限),从而使数据在以后的浏览器会话中可用. 在开始学习本教程 ...
nuxt项目打包后阿里云播放器错误：ReferenceError Aliplayer is not defined
nuxt项目打包后阿里云播放器错误:ReferenceError: Aliplayer is not defined 这个问题搞了我一天,阿里云视频播放有时点进去是好的,有时候就报错,而且一刷新也报这 ...
React 项目中使用Echarts
直接上代码吧: react 项目中添加Echarts 相关模块 npm install echarts --save 代码: import React from 'react' import * as ...
react项目中使用mocha结合chai断言库进行单元测试
react项目中使用mocha结合chai断言库进行单元测试 git地址:https://github.com/yancekang/... 如果对你有所帮助,感谢start 项目搭建 create-r ...

react项目中使用阿里播放器播放视频，包括切换视频，播放定时跳转（兼容ios和andro），播放完成

react项目中使用阿里播放器播放视频，包括切换视频，播放定时跳转（兼容ios和andro），播放完成

react项目中使用阿里播放器播放视频，包括切换视频，播放定时跳转（兼容ios和andro），播放完成相关推荐

最新文章

热门文章