include the following code in your html head tag.
<head>
<!-- css -->
<link rel='stylesheet' type="text/css" href="https://vastvids.com/static/base/style_video_player.css">
<!-- font awesome -->
<script src="https://kit.fontawesome.com/68a3603f09.js" crossorigin="anonymous"></script>
<!-- google fonts & icons -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link href="//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&subset=latin" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
<!-- jquery & media queries -->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
</head>
Include the following code in your html body.
<body>
<div class="video-player-sdk" style="width: 300px; height: 250px;">
<div class="vp-container show-controls">
<video class="vp-video" poster="" playsinline autoplay muted>
<source src="" type="video/mp4">
<source src="" type="video/ogg">
<!-- the span tags with the class .vastvids-resolutions lets us know to check the data attributes for the resolution & its url to pair the two in the resolutions option -->
<!-- Any url in the span data attribute that matches the video's first <source> tag src, is the url that will be given an #active id and a darkened color-hex in the resolution pop-up options. -->
<span class="vastvids-resolutions" data-vastvids-resolution="Default" data-vastvids-resolution-url="https://www.video_url.com"></span>
<span class="vastvids-resolutions" data-vastvids-resolution="720p" data-vastvids-resolution-url="{{ https://www.video_url_720.com"></span>
</video>
</div>
</div>
<script type="text/javascript">
// (optional) In certain scenarios such as using autoplay & muted to bypass ios restrictions
// you can use this variable to enable a video to be unmuted the first time it's clicked
var firstClickUnmute = true
</script>
<!-- must be at button of other SDK code -->
<script type="text/javascript" src="https://vastvids.com/static/javascript/video_player.js"></script>
</body>
You can also customize the colors of the video player to match your color scheme.
<head>
<style>
.vp-container .speed-options li:hover{
background: #dfdfdf; /* video speed options background-color*/
}
.vp-container .speed-options li.active{
color: #fff; /* video speed options text color*/
background: #961396; /* video speed options background-color*/
}
.vp-container .progress-area .progress-bar{
background: #961396; /* video progress bar background-color*/
}
:root {
--check-secondary: #961396; /* video progress bar time-keeping circle background-color*/
}
.vp-container .loader{
border: 6px solid #f3f3f3; /* the color of the buffer icon */
border-top: 6px solid #3498db; /* the spinning part of the buffer icon */
}
</style>
</head>
If your using ajax to load new video players, you will need to call the load_vastvp_js() function to refresh the video players javascript. Just include the following script in the HTML page that is being loaded through ajax.
<body>
<script type="text/javascript">
load_vastvp_js();
</script>
</body>
There you go! your set to go.