本文介绍如何使用 Web 拉流 SDK（VePlayer）启用直播时移。通过集成该功能，您的用户可以在观看直播过程中，通过拖动时间轴回放近期的直播内容，适用于课程回看、会议纪要等场景，提升用户体验。

适用版本

本文档适用于最新版本的 Web 拉流 SDK，版本信息请参考发布历史，历史版本请参考历史文档。

前提条件

已完成 SDK 集成。

集成步骤

1. 参考时移配置说明在直播控制台中配置时移。

2. 拼接直播时移播放地址，拼接规则为 {PullDomain}/{AppName}/{StreamName}.m3u8?{鉴权参数}，详细参数说明请参见拼接直播时移播放地址，

3. 在播放器中传入拼接好的相对时移地址。

   说明

   • 直播时移的参数配置详情，请参考接口说明。
   • liveStartTime 需使用浏览器本地时间。

4. 引入直播时移插件，代码示例如下所示。

   通过 CDN 集成

   通过 NPM 集成

   <script src="https://lf-unpkg.volccdn.com/obj/vcloudfe/sdk/@volcengine/veplayer/2.7.0/umd/veplayer.plugin.time.shift.production.js"></script>
   	<link rel="stylesheet" href="https://lf-unpkg.volccdn.com/obj/vcloudfe/sdk/@volcengine/veplayer/2.7.0/umd/veplayer.plugin.time.shift.production.css">        
   

   import { timeShift } from '@volcengine/veplayer-plugin';
   	import '@volcengine/veplayer-plugin/time-shift/style';        
   

5. 将直播时移插件作为配置传入播放器中，并配置时移相关参数，代码示例如下所示。

   通过 CDN 集成

   通过 NPM 集成

   VePlayer.createLivePlayer({
   	  width: 640,
   	  height: 360,
   	  url: 'https://testpull.mycloud.com/live/mystream.m3u8',
   	  timeShift: {
   	    liveStartTime: Date.now() / 1000 - 60,
   	  },
   	  plugins: [window.VePlayerTimeShift],
   	  logger: {
   	    appId: '5****8',
   	  },
   	});        
   

   register([hls]);
   	
   	createLivePlayer({
   	  width: 640,
   	  height: 360,
   	  url: 'https://testpull.mycloud.com/live/mystream.m3u8',
   	  timeShift: {
   	    liveStartTime: Date.now() / 1000 - 60,
   	  },
   	  plugins: [timeShift],
   	  logger: {
   	    appId: '5****8',
   	  },
   	});