Video on Demand Player SDK Documentation
Total Page:16
File Type:pdf, Size:1020Kb
Video on Demand Video on Demand Player SDK Documentation Product Documentation ©2013-2019 Tencent Cloud. All rights reserved. Page 1 of 32 Video on Demand Copyright Notice ©2013-2019 Tencent Cloud. All rights reserved. Copyright in this document is exclusively owned by Tencent Cloud. You must not reproduce, modify, copy or distribute in any way, in whole or in part, the contents of this document without Tencent Cloud's the prior written consent. Trademark Notice All trademarks associated with Tencent Cloud and its services are owned by Tencent Cloud Computing (Beijing) Company Limited and its affiliated companies. Trademarks of third parties referred to in this document are owned by their respective proprietors. Service Statement This document is intended to provide users with general information about Tencent Cloud's products and services only and does not form part of Tencent Cloud's terms and conditions. Tencent Cloud's products or services are subject to change. Specific products and services and the standards applicable to them are exclusively provided for in Tencent Cloud's applicable terms and conditions. ©2013-2019 Tencent Cloud. All rights reserved. Page 2 of 32 Video on Demand Contents Player SDK Documentation Playback SDK Overview Integration on iOS Superplayer for iOS Integration on Web Superplayer TCPlayer User Guide Development Documentation ©2013-2019 Tencent Cloud. All rights reserved. Page 3 of 32 Video on Demand Player SDK Documentation Playback SDK Overview Last updated:2021-08-23 17:53:03 VOD provides the basic player and superplayer for different scenarios. In short video playback scenarios (such as short videos on UGSV social media, ecommerce platforms, and WeChat Official Account), you can integrate the basic player SDK as instructed here. In long video playback and encrypted video playback scenarios (such as video social media, online education websites, and online TV platforms), you can integrate the superplayer SDK as instructed below: Feature Overview The superplayer SDK has a wide variety of playback features, including: The brightness, volume level, and progress can be adjusted through gestures. Different resolutions can be switched between manually, and the resolution can also be adaptive to the network bandwidth. Different playback speeds can be specified, and mirroring and hardware acceleration can be enabled. Timestamp information can be added to the progress bar, and corresponding thumbnails can be displayed for preview. For all features, please see VOD Superplayer - Feature List. Integration Method Player Type SDK Download Address User Guide Android Android Superplayer iOS iOS Web Web ©2013-2019 Tencent Cloud. All rights reserved. Page 4 of 32 Video on Demand Integration Guide To help you quickly integrate the superplayer of VOD, we provide a superplayer integration guide to describe the integration steps by way of demos. ©2013-2019 Tencent Cloud. All rights reserved. Page 5 of 32 Video on Demand Integration on iOS Superplayer for iOS Last updated:2020-04-02 16:43:50 Overview The superplayer SDK for iOS is a player component used to play back videos in VOD. It can implement powerful playback functionality similar to Tencent Video with just a few lines of code. Basic features: landscape/portrait mode switch, definition selection, gestures, small window playback, etc. Advanced features: video buffering, software/hardware decoding switch, adjustable-speed playback, video thumbnails, DRM-encrypted playback, etc. The superplayer SDK supports more formats and has better compatibility and functionality than system-default players. In addition, it features instant playback on splash screen and low latency. SDK Download The VOD superplayer SDK for iOS can be downloaded here. Quick Integration CocoaPods integration Add the following code to your Podfile: pod 'SuperPlayer' Enter pod install or pod update on the command line to perform the installation. Preparing videos Log in to the VOD Console, click Media Assets on the left sidebar, and you will see the uploaded video and its corresponding ID (i.e., FileId ) in the video list in the Uploaded column. If you don't ©2013-2019 Tencent Cloud. All rights reserved. Page 6 of 32 Video on Demand have a video, please click Upload Video to upload one. You can initiate an adaptive bitrate streaming task for the uploaded video through ProcessMedia: You are recommended to enter 10 for MediaProcessTask.AdaptiveDynamicStreamingTaskSet.Definition in the API parameter, indicating transcoding to adaptive bitstream in HLS format. Starting playback The main class of the player is SuperPlayerView , and videos can be played back after it is created. // Import the header file #import <SuperPlayer/SuperPlayer.h> _playerView = [[SuperPlayerView alloc] init]; // Set the delegate to accept events _playerView.delegate = self; // Set the parent View; `_playerView` will be automatically added under `holderView` _playerView.fatherView = self.holderView; SuperPlayerModel *playerModel = [[SuperPlayerModel alloc] init]; SuperPlayerVideoId *video = [[SuperPlayerVideoId alloc] init]; // Set the playback information video.appId = 1256993030; //AppId video.fileId = @"7447398157015849771"; // Video `FileId` video.playDefinition = @"10"; // Playback template ID video.version = FileIdV3; playerModel.videoId = video; // Start playback [_playerView playWithModel:self.playerModel]; In the code, appId is your AppId, fileId is the ID of the video you want to play back, playDefinition is the ID of the playback template used for playback, and version is fixed to SuperPlayerVideoId.FILE_ID_V3 . Run the code and you can see that the video is played back on the phone and most of the features in the UI are available. ©2013-2019 Tencent Cloud. All rights reserved. Page 7 of 32 Video on Demand Thumbnails and Timestamps When videos are played back, the "thumbnails" and "timestamps" on the progress bar can help viewers find the points of interest easily. Thumbnails are implemented through image sprites, while timestamps by modifying timestamp information in media assets. After image sprites are generated and timestamps are added, new elements will be displayed in the player UI. Small Window Playback A small window is a player that floats over the main window within the application. Small window playback is very simple. You just need to call the following code in the appropriate position: [SuperPlayerWindow sharedInstance].superPlayer = _playerView; // Set the player for small window playback [SuperPlayerWindow sharedInstance].backController = self; // Set the returned view controller [[SuperPlayerWindow sharedInstance] show]; // Floating display Exiting Playback If the player is no longer needed, please call resetPlayer to clear the internal state of the player and free up the memory. [_playerView resetPlayer]; More Features To try out the complete features, scan the QR code below to download the Tencent Video Cloud toolkit or run the project demo directly. ©2013-2019 Tencent Cloud. All rights reserved. Page 8 of 32 Video on Demand ©2013-2019 Tencent Cloud. All rights reserved. Page 9 of 32 Video on Demand Integration on Web Superplayer TCPlayer User Guide Last updated:2021-08-26 17:20:37 This document describes the web superplayer of VOD, which can be quickly integrated with your own web applications through flexible APIs to implement video playback. This document is intended for developers who have a basic knowledge of JavaScript. Overview of Capabilities The VOD superplayer implements video playback through the HTML5 <video> tag and Flash. It enables a browser that does not support video playback natively to play back videos, delivering a unified video experience across platforms. In addition, it features hotlink protection and playback of encrypted general HLS videos with the aid of the VOD service. Supported video formats and platforms Browser/Format MP4 HLS Chrome ✔ ✔ Firefox ✔ ✔ Edge ✔ ✔ QQ Browser ✔ ✔ Safari for macOS ✔ ✔ Safari for iOS ✔ ✔ WeChat/QQ for iOS ✔ ✔ Chrome for Android ✔ ✔ WeChat/QQ for Android ✔ ✔ Mobile QQ Browser ✔ ✔ IE 8, 9, 10, 11 ✔ ✔ ©2013-2019 Tencent Cloud. All rights reserved. Page 10 of 32 Video on Demand Note: Only the H.264 video encoder is supported. Chrome and Firefox on Windows and macOS are supported. Chrome, Firefox, Edge, and QQ Browser need to load hls.js when playing back HLS files. WeChat and QQ for Android, which have the TBS kernel, natively support MP4 and HLS. Flash is needed to play back videos in IE 8 and HLS files in IE 9/10/11. Please make sure that the browser supports Flash. IE 8 is supported only on Windows 7. The player is compatible with common browsers and can automatically identify the platform to use the optimal playback scheme. For example, it will use the Flash player in IE 11/10/9/8 to enable the browser to play HLS videos through HTML5, preferably use the HTML5 technology in modern browsers such as Chrome for video playback, and directly use the HTML5 technology or the browser kernel capabilities in mobile browsers. Transcoding service on VOD platform As MP4 and HLS (M3U8) are currently the most widely supported formats in desktop and mobile browsers, Tencent Cloud's VOD platform will eventually publish the uploaded videos in MP4 or HLS (M3U8) format. Preparations For the specific process, please see Using Superplayer for Playback - Integration Guide. Initializing Web Player After the preparations are completed, you can add a video player to your webpage in the following steps: Step 1. Import files into the page Import the player style and script files into the