全部产品

播放器开发

Web端播放器支持HLS和HTTP-FLV播放协议,本文介绍Web端播放器的开发方法。

视频边缘智能服务LinkVisual Web端播放器,基于Video.js框架,集合LinkVisual视频业务开发,为Web端播放器的视频直播和录像文件播放提供解决方案。支持播放HTTP-FLV协议和HLS协议的视频。关于Web端播放器的详细信息,请参考播放器概述

步骤一:在HTML代码中引入CDN资源

CDN资源如下:

<link href="//g.alicdn.com/code/lib/video.js/7.9.7/video-js.min.css" rel="stylesheet">
<script src="//g.alicdn.com/code/lib/video.js/7.9.7/video.min.js"></script>
<script src="//g.alicdn.com/linkplatform/videojs-plugins/0.0.3??videojs-tech-flv.js,videojs-plugin-hls-compat.js"></script>

步骤二:配置JavaScript文件

JavaScript文件包括注册插件到Video.js,配置Video.js提供的方法以及配置LinkVisual提供的方法。

function getStreamUrl() {
  return Promise.resolve('...'); // 获取播放地址返回一个promise
}

function getSourceType(url) {
  let type = '';
  if (/\.flv/.test(url)) {
    type = 'video/x-flv';
  } else if (/\.m3u8/.test(url)) {
    type = 'application/x-mpegURL';
  } else if(/\.mp4/.test(url)) {
    type = 'video/mp4';
  }
  return type;
}

function createPlayer(cb) {
  var videoEl = document.getElementById('videoEl');
  var player = videojs(videoEl, {   //配置Video.js提供的方法
    autoplay: false,
    muted: true,
    controls: true,
    preload: 'none',
    loop: false,
    techOrder: ['flv', 'html5'],
    flv: {
      reconnInterval: 5000,
      reconnTimes: 10,
      getStreamUrl,
      mediaDataSource: {
        cors: true,
        withCredentials: true
      },
      flvConfig: {
        lazyLoadMaxDuration: 24 * 60 * 60,
      },
    },
    html5: {
      hls: {
        cacheEncryptionKeys: true,
      },
    },
  }, cb);

//LinkVisual相关功能

   player.on('error', (e) => {   
    console.error('videojs error: ', e);
  });
  player.on('flvError', (e) => {
    console.error('flv error: ', e.errorInfo);
  });

  var wrappedPlayer = {
    play: function(loadSource) {
      if (loadSource) {
        if (!player.paused()) {
          player.pause();
        }
        player.reset();
        player.removeClass('vjs-paused');
        player.addClass('vjs-waiting');
        return getStreamUrl().then((url) => {
          var source = {
            src: url,
            type: getSourceType(url)
          };
          player.src(source);
          player.autoplay(true);
          player.load();
        });
      }
    
      return player.play();
    },

    pause: function() {
      return player.pause();
    }
  }

  return wrappedPlayer;
}

//注册插件到Video.js
if (!videojs.getTech('flv')) {
  videojs.registerTech('flv', videojsTechFlv);
}
if (!videojs.getPlugin('hlsCompat')) {
  videojs.registerPlugin('hlsCompat', videojsPluginHlsCompat);
}

const player = createPlayer(function () {
  player.play(true);
});

接口说明

  • Video.js框架的参数说明如下表:

    说明

    Video.js框架是用于在网页上嵌入视频播放器的开源JS库。获取Video.js提供的其他配置播放器方法,请参考Video.js

    方法

    是否可选

    描述

    autoplay

    可选

    播放器初始化之后,是否自动播放:

    • true:自动播放。

    • false(默认):手动播放。

    muted

    可选

    是否静音:

    • true:静音。

    • false(默认):不静音。

    注意

    如果视频加载后就要立马播放,需要设置为true,防止被浏览器阻止播放视频。

    controls

    可选

    是否配置控制条:

    • true(默认):配置。

    • false:不配置。

    若设置为false,则只能通过调用接口控制视频播放。

    preload

    可选

    是否预加载视频。可配置为如下值:

    • auto:自动预加载。

    • metadata:加载元数据信息,例如视频的长度,播放画面的尺寸等。

    • none:不预加载,开始播放时才开始下载视频。

    loop

    可选

    是否循环播放:

    • true:循环播放。

    • false(默认):不循环播放。

    techOrder

    必选

    Video.js的默认播放顺序。本示例中,配置为['flv', 'html5']

    HLS相关配置

    cacheEncryptionKeys

    必选

    是否缓存密钥:

    • true:缓存

    • false:不缓存

    若设置为false,则每次获取ts文件前再获取一次密钥。

  • LinkVisual提供的接口:

    • 播放视频

      play() => Promise<undefined> | undefined
    • 暂停播放视频

      pause() => Player
    • 设置播放源

      如果不传入参数,则使用获取播放源功能。

      src(source?: { src: string, type: string }) => string | undefined
    • 重置播放器

      调用后,会同时触发Video.js中的reset方法。

      reset() => void
    • 加载src中的资源

      load() => void
    • 设置从指定时间开始播放视频

      如果不传入该参数,则返回当前的播放时间。

      currentTime(seconds?: number) => number
    • 自动播放

      需要与Video.js中autoplay参数保持一致,如果不传参数,则获取Video.js中autoplay的值。

      autoplay(value: boolean | string) => void
    • 是否为暂停状态

      paused() => boolean
    • 开启监听事件

      on(type: string, fn: Function) => Player

      监听事件包括如下内容:

      • canplay:加载的视频流达到了播放要求。

      • ended:视频播放结束后触发。

      • error:监听播放异常时触发。

      • flvError:监听播放FLV视频流触发的异常。

      • loadeddata:浏览器加载到了视频帧时触发。

      • play:播放视频时触发。

      • playing:视频正在播放时触发,由于网络或者其它情况导致视频播放卡顿,该事件会被反复触发。

    • 移除监听事件

      off(type: string, fn: Function) => Player
    • FLV相关配置

      方法

      是否可选

      描述

      reconnInterval

      必选

      直播重连间隔时长,单位为毫秒。例如设置为5000。

      reconnTimes

      必选

      播放失败时,请求重连的次数。例如设置为10。

      getStreamUrl: async()

      必选

      返回一个播放地址或者一个Promise最终返回播放地址。

      cors

      可选

      是否支持跨域访问:

      • true(默认):支持。

      • false:不支持。

      withCredentials

      可选

      是否在跨域请求时携带Cookie:

      • true:携带。

      • false(默认):不携带。

    • FLV播放相关配置

      方法

      是否可选

      描述

      lazyLoadMaxDuration

      可选

      加载指定时间的视频流后停止拉流,默认为3*60s。