VLPlayer SDK - HTML5

Updated on 02 Oct 2022
2 Minutes to read
Contributors

Print
Share
Dark
Light
PDF

Article summary

Did you find this summary helpful?

Thank you for your feedback

VLPlayer SDK - Web HTML5
(version 3.1.1)

You can integrate the ViewLift Player SDK into your website and customize it. The Web SDK that has the CSS, HTML, and Javascript files does all of the heavy lifting of playing video and provides basic capabilities for you to programmatically control the player.

Setup
There are two things you’ll need for the HTML5 ViewLift player: the reference to the Javascript and CSS files on whichever page you want to use the player SDK.ViewLift provides Javascript and the main CSS files which you can import into your code. We can provide assistance in writing a basic HTML code with which you can initiate the web player. You can as well modify the CSS file.

<!-- VLPlayer JS -->
<script src = "https://player.viewlift.com/3.1.1/player.js" ></script>

<!-- VLPlayer CSS -->
<link rel="stylesheet" type="text/css"
href = " https://player.viewlift.com/3.1.1/player.css " / >

After you successfully reference these files, you simply need to initialize an instance of the ViewLift Player with a valid ViewLift Token and a video ID against a video element that you’ve created. After that, all of the methods and events can be called on that player object.

Note:

If you want to use AWS IVS as the streaming service, you need to import below SDK Url as well in the HTML before the VL Player JS import.

< script
src = "https://player.live-video.net/1.1.2/amazon-ivs-videojs-tech.min.js ” > </ script >

Required Video Container

<div class = "vl-video-container" >
<video id = "viewlift-player" class = "vl-video" controls
preload = "auto" > </video>
</div>

Initialize with required parameters

<script>
var player = VLPlayer.init({
containerId: 'viewlift-player' ,
token: "viewlift-token" ,
videoId: "viewlift-video-id",
controlsColor : <Hex Code> - This key is optional
});
</script>

Methods & Events

Below, you’ll find the list of supported methods and events for the player. All methods can be called on the player object. You can listen for events by using the method of the player object.
Here is an example of how to use a method and an event, respectively:

<script>
// sample method code
player.play();
// sample event listener code
player.on(ended, function(event, data) {
// the video has ended
});
</script>

List of supported Methods

Method	Parameters	Notes
init()	Pass in an object with the following: > containerld (String) - required > token (String) - required > videold (String) - required > autoplay (Boolean)	Initialization of the player with the required parameters.
play()		Plays the video from a stopped/paused state.
pause()		Pauses the video from a playing state.
currentTime()	> seconds (Integer) - optional	If no parameter is passed in, this returns the current time of the video in seconds. If an integer for seconds is passed in, this will set the time of the video to the specified value.
dispose()		Destroys the video player, stops any processes, and does any necessary clean-up.

List of supported Events

Event	Description
play	Fired when the video starts playing from a paused or stopped state.
ended	Fired when the video has ended.
error	Fired when an error occurs in the player.
timeupdate	Fired when the current playback position has changed. * During playback, this is fired every 15-250 milliseconds, depending on the playback technology in use.
pause	Fired when playback is paused.
seeked	Fired when a seek operation completes.

For questions or issues regarding the Player SDK or integrations, reach out to ViewLift Technical Support.

Was this article helpful?

What's Next

VLPlayer SDK - iOS

Table of contents