Skip to content

Instantly share code, notes, and snippets.

View jramsahai's full-sized avatar

Ji Ramsahai jramsahai

2 followers · 1 following
View GitHub Profile
@jramsahai
jramsahai / jump_to_time.html
Last active August 30, 2017 13:42
I'm often asked if there's a way to jump to a specific time in a video. While the functionality doesn't exist in the player itself (because of the possibility of having multiple players on the same page) it's pretty easy to do for one player on a page using our Player API. Here's an example of how it can be done.
<html>
<head>
</head>
<body>
<!-- Vidyard inline embed code -->
<script type="text/javascript" id="vidyard_embed_code_hedIuHeKRKySm1qx9xXV7w" src="//play.vidyard.com/hedIuHeKRKySm1qx9xXV7w.js?v=3.1&type=inline"></script>
<script src="//play.vidyard.com/v0/api.js"></script>
<script type="text/javascript">
// Parsing the query string
function get_parameter_by_name(name) {
@jramsahai
jramsahai / GET_on_play.html
Created November 17, 2014 15:43
Some web analytics platforms provide you with a unique URL to send a GET request to when an event on the page executes. As an example, you can send a GET request to a tracking pixel URL when the player starts with the following code. This uses the player API.
<html>
<head>
<script src="//play.vidyard.com/v0/api.js"></script>
<script>
function httpGet(theUrl) {
var xmlHttp = null;
xmlHttp = new XMLHttpRequest();
xmlHttp.open( "GET", theUrl, false );
xmlHttp.send( null );
return xmlHttp.responseText;
@jramsahai
jramsahai / load_multiple_inline_players_ondemand.html
Last active March 17, 2022 17:05
A slight modification to this: https://gist.github.com/jramsahai/040be6747bf60f207337. This one will allow you to load multiple players in different locations on the page on demand.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
// Generate and return embed code for a given player UUID
function getEmbedCode(uuid) {
var script=document.createElement('script');
script.type='text/javascript';
script.id='vidyard_embed_code_'+uuid;
script.src='//play.vidyard.com/'+uuid+'.js?v=3.1.1&type=inline&autoplay=0';
@jramsahai
jramsahai / load_inline_player_on_demand.html
Created September 30, 2014 14:35
Depending on the number of players you are planning on displaying on your page, it might be a good idea to avoid loading every single player when the page loads. Creating all of those Flash objects at once can really slow things down. Here's a suggestion on how you can dynamically load an inline player. This example also shows how to change the …
<htmL>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
function getEmbedCode(uuid) {
var script=document.createElement('script');
script.type='text/javascript';
script.id='vidyard_embed_code_'+uuid;
script.src='https://play.vidyard.com/'+uuid+'.js?v=3.1&type=inline';
return script;
@jramsahai
jramsahai / push_to_ga.html
Last active September 13, 2017 17:50
Using Google Analytics Event tracking and the Vidyard player API, we can push player events into Google Analytics to allow us to capture some useful viewership data along side the standard web traffic reporting.
<html>
<head>
<!-- Vidyard player API script -->
<script src="//play.vidyard.com/v0/api.js"></script>
<!-- Google Analytics tracking code -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
@jramsahai
jramsahai / pause_between_chapters.html
Created June 26, 2014 18:44
Pausing the player after each chapter allows you to take some kind of alternate action with the viewer in the middle of the player. Use the opportunity to hit them with a CTA of some kind (additional info, form, etc.) then start them right back on the video from where they left off. I used the player API and a new play event.
<html>
<head>
<script src="//play.vidyard.com/v0/api.js"></script>
</head>
<body>
<script type="text/javascript" id="vidyard_embed_code_hsEU_eBjTeQ1Wk1NxIF99w" src="//play.vidyard.com/hsEU_eBjTeQ1Wk1NxIF99w.js?v=3.1&type=inline"></script>
<script type="text/javascript">
var video = new Vidyard.player("hsEU_eBjTeQ1Wk1NxIF99w");
var paused = 0;
video.on("play", function() {
@jramsahai
jramsahai / autoplay_next_video.html
Last active June 21, 2016 13:24
We get a lot of requests on how to achieve the design you see over at http://www.vidyard.com/tour. Try playing the first video, and you'll see what I mean. Admittedly, it's a pretty sweet effect that makes use of the Vidyard javascript player API and a third party script that handles the page scrolling. Here's a sample page that makes use of thi…
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div class="tour_section" id="tour_section_1">
<script type="text/javascript" id="vidyard_embed_code_88eO52vbto7om8vPVV6lZw" src="//play.vidyard.com/88eO52vbto7om8vPVV6lZw.js?v=3.1&type=inline"></script>
</div>
.<br />
@jramsahai
jramsahai / play_link.html
Last active August 29, 2015 14:01
Sometimes you might want to create a play button for the Vidyard player outside of the player itself. Here's one way to do it using a hyperlink with the player API.
@jramsahai
jramsahai / delay_player_load.html
Last active January 1, 2016 18:19
On occasion, we've seen instances where the Vidyard player loads before the tracking code on a MAP tagged page. Here's a solution to delay the loading of the player until after the document is loaded. This ensures that the tracking code is loaded first, allowing the player to find the cookie info.
<html>
<head></head>
<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type='text/javascript'>
window.onload=function() {
$("#video_container").html('<script type="text/javascript" id="vidyard_embed_code_oTDMPlUv--51Th455G5u7Q" src="//play.vidyard.com/oTDMPlUv--51Th455G5u7Q.js?v=3.1&type=inline"><\/script>');
};
</script>
<div id='video_container'>
@jramsahai
jramsahai / dynamically_resize_player_using_css.html
Last active January 14, 2019 16:20
If you're looking for a way to dynamically resize the Vidyard inline JavaScript player, you'll find an example of one way to do it below.
<!--
Refer to this article for more information:
http://knowledge.vidyard.com/Core_Features/Publish_your_players/011_Publish_your_player/014_Dynamically_resize_the_inline_player
-->
<html>
<head>
<style type="text/css">
.innerContainer {
position: relative;
display: block;