智能生產制作提供單獨預覽Timeline的能力，您可以根據實際需求在前端頁面文件中引入。通過閱讀本文，您可以了解如何接入預覽組件Web SDK。
使用說明
本文中引入的預覽組件Web SDK的版本號5.2.2（僅供參考），從5.0.0開始，你需要申請License授權才能使用剪輯Web SDK。獲取最新的版本信息，請參見視頻剪輯工程——幫助信息。
License授權方式有2種：
方式1（推薦）：購買企業標準版（售價3萬元，支持進行官網價5萬元的IMS任意功能消費抵扣）及以上訂閱資源包，會贈送webSDK License，購買說明請參見：計費概述；
方式2：其他訂閱方式，您可以單獨購買webSDK license，定價2萬/年，可工單聯系官方獲取購買鏈接；
操作步驟
引入預覽組件Web SDK。
在項目前端頁面文件中的
<head>標簽處引入預覽組件Web SDK的CSS文件。<head> <link rel="stylesheet" > </head>在
<body>標簽處添加一個用以掛載預覽界面的<div>節點，并在<body>標簽末尾添加引入Web SDK的JS文件，同時添加一個用以調用Web SDK的<script>節點。<body> <div id="player-wrapper" style="height:500px"></div> // 您可以根據需要改變 container 高度 <script src="https://g.alicdn.com/thor-server/video-editing-websdk/5.2.2/player.js"></script> <script> // 調用 SDK 的代碼放在這里 </script> </body>初始化預覽組件Web SDK。
const player = new window.AliyunTimelinePlayer({ container: document.querySelector('#player-wrapper'), licenseConfig: { rootDomain: "", // license使用的根域名，例如abc.com licenseKey: "", // 申請的licenseKey，沒有配置licenseKey，在預覽時會出現水印,沒有配置license的情況下，只能在localhost的域名下預覽 }, timeline: { // 可選 VideoTracks: [], // 省略 VideoTracks 的內容 AudioTracks: [], // 省略 AudioTracks 的內容 AspectRatio: '16:9', }, getMediaInfo: (mediaId) => { return Promise.resolve('https://example.com/url/for/this/media.mp4'); }, });初始化實例
new window.AliyunTimelinePlayer(PlayerInitConfig)中的參數PlayerInitConfig說明如下：interface PlayerInitConfig { licenseConfig?: { rootDomain?: string; licenseKey?: string; }; // license配置 getTimelineMaterials?: (params: TimelineMaterial[]) => Promise<InputMedia[]>; // timeline媒資素材 mode?: 'component' | 'player'; // 播放器組件樣式：component為純組件 componentClass?: string; container: Element;// 預覽組件的容器，HTML 元素 locale?: Locales;// 界面語言，可選 'zh-CN' | 'en-US'，默認 'zh-CN' controls?: boolean; // 是否顯示底部的播控欄，默認 true timeline?: AliyunTimeline; // WebSDK 生成的 timeline 對象，需要注意與 OpenAPI 的 timeline 不完全一致 playbackRate?: number;// 初始化時的播放速度，默認是 1。注意，該值的范圍與瀏覽器本身對 video 的 playbackRate 限制有關 aspectRatio?: string;// 初始化時的畫面比例，默認是 '16:9'。可自定義寬高比，以英文冒號相連。建議與制作 AliyunTimeline 時的畫面比例一致 minWidth?: number | string;// 指定播放器最小寬度 customFontList?: CustomFontItem[]; // 自定義字體列表 getMediaInfo?: ( mediaId: string, mediaType: MediaType, mediaOrigin?: MediaOrigin | undefined, inputUrl?: string | undefined, ) => Promise<string | DynamicSrcObj>; }// 與 http://bestwisewords.com/document_detail/453478.html 中的 getDynamicSrc 一樣，通過 mediaId 返回其對應的帶鑒權的播放 URLAliyunTimelinePlayer類的定義如下：class AliyunTimelinePlayer { static getSubtitleEffectColorStyles(): Array<{ key: string; cover: string; }>; // 獲取花字列表 static getSubtitleBubbles(): Array<{ key: string; cover: string; }>;// 獲取氣泡字列表 static setDefaultLocale(locale?: Locales): void; // 設置默認語言 static getDefaultFontList(): CustomFontItem[]; // 獲取默認字體列表 static getVideoEffects(): Array<{ subType: string; cover: string; name: string; title: string; category: string | undefined; }>; // 獲取特效列表 static getVideoFilters(): Array<{ subType: string; cover: string; name: string; title: string; category: string | undefined; }>;// 獲取濾鏡列表 static getVideoTransitions(): Array<{ subType: string; cover: string; name: string; title: string; category: string | undefined; }>;// 獲取轉場列表 static parseTimeline( timeline: string | IServerTimeline, // 需要傳入畫布的大小，一般是Timeline中FECanvas的Width,Height的值 options: { outputWidth: number; outputHeight: number } = { outputWidth: 800, outputHeight: 450 }, ):ParsedResult; // 后端Timeline在前端進行預覽轉換 constructor(config: PlayerInitConfig); play(): void; // js 控制播放 pause(): void; // js 控制暫停 destroy(): void; // 銷毀實例 on(eventName: string, callback: Function): any; // 監聽事件 once(eventName: string, callback: Function): any; // 監聽事件一次 off(eventName: string): any; // 取消監聽事件 get event$(): IObservable<EventData<any>>; //事件流，通過subscribe訂閱所有事件，參考rxjs訂閱邏輯 get version(): string | undefined; // 版本 get duration(): number;// 時長 get timeline(): any;// 獲取當前Timeline set timeline(timeline: any); // 設置當前Timeline //（websdk5.2.2以上版本 ）當前場景寬度，計算x,y絕對值的時候使用 get stageWidth(): number; //（websdk5.2.2以上版本 ） 當前場景高度，計算x,y絕對值的時候使用 get stageHeight(): number; //（websdk5.2.2以上版本 ） 設置Timeline，自動parseTimeline setTimeline(timeline: any, autoParse?: boolean): Promise<void>; get currentTime(): number;// 獲取播放時間 set currentTime(currentTime: number); // 設置播放時間 get controls(): boolean; // 獲取當前控件顯示狀態 set controls(show: boolean); // 隱藏當前控件 get aspectRatio(): string; // 獲取當前組件比例 set aspectRatio(ratio: string); // 設置當前組件比例，例如16:9 get playbackRate(): number; // 獲取播放器速率 set playbackRate(speed: number); // 設置播放器速率 setFontList(value: CustomFontItem[]): Promise<void>; // 設置自定義字體 //（websdk5.2.2以上版本 ） 監控軌道數據變化 watchTrack(handler?: (tracks: ExportTrack[]) => void): () => void; //（websdk5.2.2以上版本 ） 刪除當前軌道 removeTrack(id: number): void; //（websdk5.2.2以上版本 ） 設置軌道屬性 setTrack(id: number, options: { visible?: boolean; mainTrack?: boolean; }): void; // 新增軌道（websdk5.2.2以上版本 ） addTrack(track: {id: number;type: TrackType; clips: ExportClip[];visible: boolean;mainTrack?: boolean;} ): void; // 刪除軌道素材（websdk5.2.2以上版本 ） removeClip(id: number): void; // 獲取軌道素材詳細配置（websdk5.2.2以上版本 ） getClip(id: number): ServerClip; // 新增軌道素材 （websdk5.2.2以上版本 ） addClip(clip: ServerClip): void; // 設置素材入點 （websdk5.2.2以上版本 ） setClipTimelineIn(id: number, timelineIn: number): void; // 設置素材出點 （websdk5.2.2以上版本 ） setClipTimelineOut(id: number, timelineOut: number): void; // 更新素材 （websdk5.2.2以上版本 ） updateClip(id: number, handle: (clip: ServerClip) => ServerClip): void; // 監聽素材變化 （websdk5.2.2以上版本 ） watchClip(id: number, handle: (clip: ServerClip | null) => void): () => void; // 轉換為后端Timeline （websdk5.2.2以上版本 ） toBackendTimeline(): { duration: number; timeline: any; }; // 查詢當前軌道信息 （websdk5.2.2以上版本 ） queryTracks(handler: (track: ExportTrack) => boolean): ExportTrack[]; // 查詢當前素材信息 （websdk5.2.2以上版本 ） queryClips(handler: (clip: ExportClip, track: ExportTrack) => boolean): ExportClip[]; // 高亮素材，讓素材可以自由移動 （websdk5.2.2以上版本 ） focusClip(id: number, autoSeek?: boolean): void; // 取消素材高亮 （websdk5.2.2以上版本 ） blurClip(): void; } // watchTrack導出的clip,可以通過getClip獲取該clip的具體屬性 interface ExportClip { id: number; type: MaterialType; timelineIn: number; timelineOut: number; } // watchTrack導出的Track interface ExportTrack { id: number; type: TrackType; clips: ExportClip[]; visible: boolean; mainTrack?: boolean; } // 自定義字體接口 interface CustomFontItem { key: string; // 字體唯一標識 name?: string; // 展示的名字 url: string; // 字體地址 urlType?: 'dynamic' | 'static'; // 如果url需要動態從getMedinfo中獲取，填寫dynamic否則填static } // 播放器狀態 enum PLAYER_STATE { PLAYING = 0, PAUSED = 1, STALLED = 2, ENDED = 3, BROKEN = 4 } //前端解析Timeline結果 interface ParsedResult { success: boolean; // 解析是否成功 logs: any[]; timeline: IServerTimeline; // Timeline解析結果 toBackendTimeline: (fTimeline: IServerTimeline) => IServerTimeline; //前端Timeline轉換為服務端Timeline mediaMap: ParsedMediaMap; output: { width: number; height: number; }; fontList: Array<{ key: string; url: string }>; } type ParsedMediaMap = { [key: string]: { mediaType: string; mediaId: string; mediaUrl?: string; width?: number; height?: number; duration: number; }; } type InputMedia = (InputVideo | InputAudio | InputImage); interface InputVideo { mediaId: string; mediaIdType?: MediaIdType; mediaType: 'video'; video: { duration: number; }; } interface InputAudio { mediaId: string; mediaIdType?: MediaIdType; mediaType: 'audio'; audio: { duration: number; }; } interface InputImage { mediaId: string; mediaIdType?: MediaIdType; mediaType: 'image'; image: { coverUrl?: string; }; } type MediaIdType = 'mediaId' | 'mediaURL';
釋放實例。
使用
destroy方法可以釋放實例，釋放后容器為空元素。player.destroy();
示例代碼
本文中的示例為完整示例，實現一個功能：創建一個帶自定義字體，轉場，特效的Timeline，可編輯字幕的預覽器。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
/>
<script src="https://g.alicdn.com/thor-server/video-editing-websdk/5.2.2/player.js"></script>
<title>云剪預覽播放器</title>
</head>
<body>
<div id="root" style="width: 820px;margin: 30px auto;" >
<div id="player" style="width: 800px; height: 450px"></div>
<div style="margin-top: 16px">
<div>
<label>ID</label> <br/>
<input id="subtitle" value="123" />
<br/>
<label>內容</label> <br/>
<textarea id="content" rows="4" >自定義編輯字幕</textarea>
</div>
<button id="addSubtitle">添加字幕</button>
<button id="updateSubtitle">修改字幕</button>
<button id="moveSubtitle">移動字幕</button>
<button id="removeSubtitle">刪除字幕</button>
</div>
</div>
<script type="text/javascript">
const timelineDemo = {
Version: 1,
SdkVersion: "4.12.2",
VideoTracks: [
{
// 視頻軌道
Id: 1,
Type: "Video",
Visible: true,
Disabled: false,
Count: 1,
VideoTrackClips: [
{
// 圖片
Id: 3,
TrackId: 1,
Type: "Image",
MediaURL:
"https://img.alicdn.com/imgextra/i4/O1CN01TDN7Gw1SCgVv61T4s_!!6000000002211-0-tps-1920-1046.jpg",
Title: "test.png",
X: 0,
Y: 0,
Width: 1,
Height: 1,
TimelineIn: 0,
TimelineOut: 5,
Duration: 5,
VirginDuration: 5,
},
{
// 視頻
Id: 4,
TrackId: 1,
Type: "Video",
MediaURL:
"https://ice-pub-media.myalicdn.com/vod-demo/%E6%9C%80%E7%BE%8E%E4%B8%AD%E5%9B%BD%E7%BA%AA%E5%BD%95%E7%89%87-%E6%99%BA%E8%83%BD%E5%AD%97%E5%B9%95.mp4",
X: 0,
Y: 0,
Width: 1,
Height: 1,
TimelineIn: 4, // 轉場的入點(TimelineIn)需要在上一個片段出點(TimelineOut)以前
TimelineOut: 9,
Duration: 5,
VirginDuration: 5,
Effects: [
{
// 轉場
Type: "Transition",
Id: 13,
Name: "transitions.directional",
SubType: "directional",
Duration: 1, // 轉場時長=上一個片段出點(TimelineOut)-這個片段的入點(TimelineIn)
From: 3, // 上一個片段的ID
},
],
},
],
},
{
// 特效軌道
Id: 2,
Type: "Effect",
Visible: true,
Disabled: false,
Count: 1,
VideoTrackClips: [
{
Type: "VFX",
Id: 2,
TrackId: 1,
SubType: "heartfireworks",
TimelineIn: 0,
TimelineOut: 5,
Duration: 5,
X: 0,
Y: 0,
Width: 0,
Height: 0,
},
],
},
],
AudioTracks: [],
SubtitleTracks: [
{
Id: 2,
Type: "Text",
Visible: true,
Disabled: false,
Count: 1,
SubtitleTrackClips: [
{
Id: 1,
TrackId: 2,
Type: "Text",
X: 0,
Y: 0,
TimelineIn: 0,
TimelineOut: 2,
Duration: 2,
VirginDuration: 2,
FontSize: 30,
FontColor: "#333333",
FontColorOpacity: 1,
Content: "FontUrl自定義字體",
Alignment: "BottomCenter",
// 自定義字體
FontUrl:
"https://ice-pub-media.myalicdn.com/mts-fonts/%E7%AB%99%E9%85%B7%E6%96%87%E8%89%BA%E4%BD%93.ttf",
},
],
},
],
AspectRatio: "16:9",
From: "websdk",
FECanvas: {
Width: 800,
Height: 450,
},
FEConfig: {
AutoProportion: "681:383",
},
};
const player = new window.AliyunTimelinePlayer({
container: document.getElementById("player"),
getMediaInfo: async (mediaId, mediaType, mediaOri) => {
console.log(">>>", mediaId, mediaType, mediaOri);
// 如果直接是mediaUrl的timeline，公網可訪問，直接返回預覽地址就可以
return mediaId;
/**
* // 動態請求地址參考如下代碼
* if (mediaType === "font") {
params.InputURL = InputURL;
delete params.MediaId;
}
if (mediaOrigin === "mediaURL") {
params.InputURL = mediaId;
delete params.MediaId;
}
const apiName =
mediaOrigin === "public" ? "GetPublicMediaInfo" : "GetMediaInfo";
return request(apiName, {
// http://bestwisewords.com/document_detail/197842.html
MediaId: mediaId,
})
.then((res) => {
// 注意，這里僅作為示例，實際中建議做好錯誤處理，避免如 FileInfoList 為空數組時報錯等異常情況
const fileInfoList = get(res, "data.MediaInfo.FileInfoList", []);
let mediaUrl, maskUrl;
let sourceFile = fileInfoList.find((item) => {
return item?.FileBasicInfo?.FileType === "source_file";
});
if (!sourceFile) {
sourceFile = fileInfoList[0];
}
const maskFile = fileInfoList.find((item) => {
return (
item.FileBasicInfo &&
item.FileBasicInfo.FileUrl &&
item.FileBasicInfo.FileUrl.indexOf("_mask") > 0
);
});
if (maskFile) {
maskUrl = get(maskFile, "FileBasicInfo.FileUrl");
}
mediaUrl = get(sourceFile, "FileBasicInfo.FileUrl");
const codec = get(sourceFile, "VideoStreamInfoList[0].CodecName");
return {
url: mediaUrl,
codec,
maskUrl,
};
})
.catch((ex) => {
// 外鏈地址兜底邏輯
if (mediaOrigin === "mediaURL") {
return mediaId;
}
});
*
* **/
},
});
// 預覽前端Timeline,setTimeline方法會自動解析MediaUrl和字體文件
player.setTimeline(timelineDemo);
// 可以通過toBackendTimeline轉換為后端Timeline
console.log("toBackendTimeline", player.toBackendTimeline());
document.getElementById("addSubtitle").addEventListener("click", () => {
player.addClip({
Id: Number(document.getElementById('subtitle').value),
TrackId: 2,
Type: "Text",
X: 0,
Y: 0,
TimelineIn: player.currentTime,
TimelineOut: player.currentTime+2,
Duration: 2,
VirginDuration: 2,
FontSize: 30,
FontColor: "#333333",
FontColorOpacity: 1,
Content: document.getElementById('content').value,
Alignment: "TopCenter",
// 自定義字體
FontUrl:
"https://ice-pub-media.myalicdn.com/mts-fonts/%E7%AB%99%E9%85%B7%E6%96%87%E8%89%BA%E4%BD%93.ttf",
});
});
document.getElementById("updateSubtitle").addEventListener("click", () => {
player.updateClip(Number(document.getElementById('subtitle').value),(item)=>{
return Object.assign({},item,{Content: document.getElementById('content').value})
});
});
document.getElementById("moveSubtitle").addEventListener("click", () => {
player.focusClip( Number(document.getElementById('subtitle').value));
});
document.getElementById("removeSubtitle").addEventListener("click", () => {
player.blurClip();
player.removeClip( Number(document.getElementById('subtitle').value));
});
// 監聽軌道變化
player.watchTrack((tracks)=>{
console.log('timeline變化:');
console.log(JSON.stringify(tracks,null,4));
});
</script>
</body>
</html>
對于復雜的預覽組件使用場景，例如編輯軌道、字幕、視頻特效、轉場、位置、寬高以及自定義播放器UI等功能，可以參考以下開源DEMO。示例的部署方法請參見Demo體驗。
常見問題
如何更新timeline？
在創建AliyunTimelinePlayer的實例后，通過賦值即可更新timeline。
player.timeline = {....}如果出現緩存導致的問題，可以嘗試先賦空值，清空timeline的內容，再賦值為新的timeline。
player.timeline = {} // 賦空值，清空timeline的內容預覽字體大小和合成的視頻不一致？
如果合成時字體變小，須確保timeline中包含FECanvas字段，FECanvas字段表示預覽器的分辨率，在合成時服務端會根據這個分辨率及輸出的分辨率對字體進行縮放，常見FECanvas分辨率如下：
//16:9
FECanvas: {Width: 800, Height: 450}
//9:16
FECanvas: {Width: 253.125, Height: 450}預覽播放器內置素材列表？
// 獲取字體列表
AliyunTimelinePlayer.getDefaultFontList();
// 獲取花字列表
AliyunTimelinePlayer.getSubtitleEffectColorStyles();
// 獲取氣泡字列表
AliyunTimelinePlayer.getSubtitleBubbles();
// 獲取特效列表
AliyunTimelinePlayer.getVideoEffects();
// 獲取濾鏡列表
AliyunTimelinePlayer.getVideoFilters();
// 獲取轉場列表
AliyunTimelinePlayer.getVideoTransitions();重要
傳參時需要保留空格，例如"Font":"Alibaba PuHuiTi", 。
預覽播放器組件是否支持多實例？
當前預覽播放器由于內部實現的限制，暫時僅支持單實例模式。
前端報錯player.js:27 TypeError: Cannot read properties of undefined (reading 'GLctx')？
出現這種錯誤一般是沒有打開瀏覽器硬件加速導致的，請確保瀏覽器內核版本為Chrome且版本號大于80，并在瀏覽器上打開硬件加速。
說明
當前Web SDK只支持Chrome內核瀏覽器。
相關參考
文檔內容是否對您有幫助？