React 项目集成西瓜视频

1.创建项目,安装西瓜视频

$ npx create-react-app my-app

$ npm install  xgplayer

2. 直接上代码 ( 简易版 )

import Player from 'xgplayer';
import 'xgplayer/dist/index.min.css';

const VideoPlayer = () => {
  useEffect(() => {
    let player = new Player({
      // 两种方式均可
      // id:'demo-video', // 标签上的id属性
      el: document.querySelector('#demo-video'),
      url: 'https://sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-360p.mp4', // 视频链接地址
      // 其他配置...
      fitVideoSize: 'auto',// 自适应视频内容宽高
      volume: 0.6,// 默认音量
      autoplay: false, // 自动播放
      videoInit: true,// 初始化显示视频首帧,不可与autoplay同时设置,在移动端设置无效
      playbackRate: [0.5, 0.75, 1, 1.5, 2], // 设置倍数播放
      defaultPlaybackRate: 1, // 默认倍速
      lang: 'zh-cn', // 语言
      progressDot: [
        {
          time: 10, //展示标记的时间
          text: '标记文字1', //鼠标hover在标记时展示的文字
          duration: 8, //标记段长度（以时长计算）
          style: { //标记样式
            background: 'white'
          }
        }, {
          time: 22,
          text: '标记文字'
        }, {
          time: 56,
          duration: 8,
        }, {
          time: 76,
        }
      ], // 进度条标记
      keyShortcutStep: { //设置调整步长
        currentTime: 10, //播放进度调整步长，默认10秒
        volume: 0.2 //音量调整步长，默认0.1
      }, // 键盘快捷键
      errorTips: `请<span>刷新</span>试试`, // 错误提示
      pip: true,//画中画
    });
     player.emit('resourceReady', [
      { name: '标清', url: '//sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-360p.mp4' },
      { name: '超清', url: '//sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-720p.mp4' },
      { name: '高清', url: '//sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-480p.mp4' }
    ]); // 视频清晰度切换
  }, []);

return (
    <div style={{ width: '640px', height: '360px' }} id='demo-video' />
  );
}

标记文字部分 

 3.效果展示

更多关于西瓜视频视频的配置项,请移步官方文档 西瓜播放器