You need to enable JavaScript to run this app.
导航

VePlayer Web 播放器接入说明

最近更新时间2023.08.04 11:51:47

首次发布时间2022.10.31 15:45:33

本文介绍如何快速引入 VePlayer Web 播放器,并为常用前端框架(React 和 Vue)提供了代码示例。

功能体验

VePlayer Web 播放器针对多种播放场景,提供了丰富的功能。您可通过 功能效果体验 页面,全面了解播放器的功能效果和接入方法。

引入依赖

在 HTML 页面内引入 VePlayer Web 播放器的样式文件和脚本文件。代码示例如下:

<link rel="stylesheet" href="//unpkg.byted-static.com/volcengine/veplayer/1.5.7/dist/index.min.css">
<script src="//unpkg.byted-static.com/volcengine/veplayer/1.5.7/dist/index.min.js"></script>

说明

功能效果体验页面中代码示例部分的版本号为播放器当前最新版本,如需更新,请关注最新版本号。

JavaScript Demo

<!DOCTYPE html>
<html lang="zh">
<head>
  <title>火山引擎VePlayer</title>
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
  <link rel="stylesheet" href="//unpkg.byted-static.com/volcengine/veplayer/1.5.7/dist/index.min.css">
  <script>window.gfdatav1={"env":"prod","ver":"1.0.0.358","canary":0,"garrModules":null,"envName":"prod","region":"cn","webServerCodeType":"DeployServerlessWebServer","runtime":"workerV2","extra":{"canaryType":null}}</script><script src="//unpkg.byted-static.com/volcengine/veplayer/1.5.7/dist/index.min.js"></script>
</head>
  <body>
    <div id="mse"></div>
    <script>
      var playerSdk = new VePlayer({
        id: 'mse',
        url: "//voddemo-play.volcvod.com/453b1f794dfa49f4819b5d923658411a?auth_key=1776913683-830c08a311bb49fab40dbaa90ebd4db3-0-1b61cbd491235c69d89a694bd51a1027",
        width: 640,
        height: 360,
        poster:"//console-image.volcvod.com/tos-vod-cn-v-8a997967cc533b04/0d36e7aa133945fa84b65c321b4cd0f0~noop.jpeg",
      });
    </script>
  </body>

</html>

React Demo

import React, { useEffect, useRef, useMemo } from 'react';
import { debounce } from 'lodash';

const PlayerDemo = () => {
  const playerRef = useRef(null);
  const init = useMemo(() => {
    return debounce(() => {
      playerRef.current = new window.VePlayer({
        id: 'mse',
        width: 600,
        height: 400,
        url: '//voddemo-play.volcvod.com/453b1f794dfa49f4819b5d923658411a?auth_key=1751784462-5790bacb11934b83b6571facaa7cce37-0-5f02e8e22da5a49fded01711681ed4e4',
      });
    });
  });

  useEffect(() => {
    if (playerRef.current) {
      playerRef.current.destroy();
      playerRef.current = null;
    }
    init();
  }, []);
  return <div id="mse"></div>;
};

export default PlayerDemo;

Vue Demo

<template><div id="mse"></div>
</template><script>export default {
  name: 'PlayerDemo',
  mounted() {
    this.player = new window.VePlayer({
      id: 'mse',
      width: 600, 
      height: 400,
      url: '//voddemo-play.volcvod.com/453b1f794dfa49f4819b5d923658411a?auth_key=1751784462-5790bacb11934b83b6571facaa7cce37-0-5f02e8e22da5a49fded01711681ed4e4',
    });
  }
}
</script>

能力拓展

VePlayer 底层依赖 xgplayer,开发自定义插件需安装 xgplayer 依赖包。

水印插件

npm install xgplayer

新建 WaterMarkVideoPlugin.tsx 文件,示例如下:

import { Plugin } from 'xgplayer';
import { IPluginOptions } from 'xgplayer/es/plugin/plugin';

const { POSITIONS } = Plugin;

export default class WaterMarkVideoPlugin extends Plugin {
    static get pluginName() {
        const CONSTNAME = 'WaterMarkVideoPlugin';
        return CONSTNAME;
    }
    get label() {
        return this.playerConfig?.watermark?.label || 'watermark'
    }
    static get defaultConfig() {
        return {
            position: POSITIONS.ROOT,
            index: 3
        };
    }
    constructor(args: IPluginOptions | undefined) {
        super(args);
        this.onClick = '';
        this.config = {};
    }
    afterCreate() {
        const oDivList = document.getElementsByClassName('water-mark-bg')
        for (let i = 0; i < oDivList?.length; i++) {
            const oDiv = oDivList[i];
            for (let i = 0; i < 20; i++) {
                const createDiv = document.createElement('div')

                for (let j = 0; j < 20; j++) {
                    const createSpan = document.createElement('span')

                    createSpan.innerHTML = this.label
                    createDiv.appendChild(createSpan)
                }
                oDiv.appendChild(createDiv)
            }
        }
    }
    render() {
        return `<xg-water-mark class="water-mark">
        <div class="water-mark-bg">
        </div>
        <div class="water-mark-content"></div>
        </xg-water-mark>`;
    }
}

新建 player.less 样式文件,示例如下:

// 水印相关样式
.water-mark {
  position: relative;
  overflow: hidden;
}
.water-mark-content {
  width: 100%;
}
.water-mark-bg {
  position: absolute;
  left: -100px;
  top: -100px;
  right: -100px;
  bottom: -100px;
  transform: rotate(-10deg);
  z-index: 5;
  div {
    display: flex;
    &:nth-child(2n) {
      margin-left: -80px;
    }
  }
  span {
    margin: 30px;
    display: inline-block;
    font-size: 12px;
    color: rgba(242, 242, 242, 0.2);
    white-space: nowrap;
  }
}

插件使用:

import React, { useEffect, useRef, useMemo } from 'react';
import { debounce } from 'lodash';
//按照正确路径引入WaterMarkVideoPlugin文件
import WaterMarkVideoPlugin from './WaterMarkVideoPlugin';
//按照正确路径引入样式文件
import './player.less';

const PlayerDemo = () => {
  const playerRef = useRef(null);
  const init = useMemo(() => {
    return debounce(() => {
      playerRef.current = new window.VePlayer({
        id: 'video',
        width: 600,
        height: 400,
        url: '//voddemo-play.volcvod.com/453b1f794dfa49f4819b5d923658411a?auth_key=1751784462-5790bacb11934b83b6571facaa7cce37-0-5f02e8e22da5a49fded01711681ed4e4',
        //配置水印参数
        watermark: {
        label: 'WaterMark' //在此自定义水印内容
        },
        //引入水印插件
        plugins: [WaterMarkVideoPlugin],
      });
    });
  });

  useEffect(() => {
    if (playerRef.current) {
      playerRef.current.destroy();
      playerRef.current = null;
    }
    init();
  }, []);
  
  return <div id="video"></div>;
};

export default PlayerDemo;

VePlayer Web SDK 报错日志上报

VePlayer Web SDK 直播报错日志的上传方法如下。

  1. 登录控制台:https://console.volcengine.com/baf/my_app/,创建应用,生成并获取应用 ID。参考以下示例:


  1. liveLogger 中传入获取的 appId,开启日志上报。参考以下示例:
const playerSdk = new VePlayer({
    id: 'mse',
    isLive: true,
    width: 600,
    height: 400,
    url: '//pulldomain/appname/mainstream.flv',
    liveLogger: {
        appId: '2****4'
    }
});
js
  1. 在直播过程中,如果出现播放异常,可以 联系技术支持,定位并排查问题。