Skip to content

Instantly share code, notes, and snippets.

@jramsahai

jramsahai/visualforce_example.html

Created December 10, 2018 20:54
Show Gist options
  • Save jramsahai/0e055225f9b6cb6c1caf091807d32cb3 to your computer and use it in GitHub Desktop.
Save jramsahai/0e055225f9b6cb6c1caf091807d32cb3 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
visualforce_example.html
<apex:page sidebar="false" showHeader="false" standardStylesheets="false" cache="false" applyHtmlTag="false">
<html>
<head>
<style type="text/css">
.container {
max-width: 960px;
margin: 0 auto;
}
.controls{
width:75px;
height: 75px;
margin: 0 auto;
margin-bottom: 1em;
button{
float:left;
width: 100%;
height: 100%;
border-radius: 4px;
cursor: pointer;
}
}
// quick helpers
.hide{
display: none;
}
.show{
display: block;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://play.vidyard.com/embed/v4.js"></script>
<script type="text/javascript">
vidyardEmbed.api.addReadyListener((_, player) => {
vidyardEmbed.api.progressEvents(({ chapter, event, player }) => {
const { name } = player.metadata.name;
console.log(`${name}: ${event}%`);
if (event === 4) {
player.pause();
}
}, [1, 2, 3, 4, 25, 50, 75, 100]);
}, '4AR99tfkSMTdkwvEAsFaNe');
</script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<div class="controls">
<button id="playButton"><i class="material-icons">play_circle_outline</i></button>
<button id="pauseButton" class="hide"><i class="material-icons ">pause_circle_outline</i></button>
</div>
<div class="container">
<!-- The script tag should live in the head of your page if at all possible -->
<!-- Put this wherever you would like your player to appear -->
<img
style="width: 100%; margin: auto; display: block;"
class="vidyard-player-embed"
src="https://play.vidyard.com/4AR99tfkSMTdkwvEAsFaNe.jpg"
data-uuid="4AR99tfkSMTdkwvEAsFaNe"
data-v="4"
data-type="inline"
/>
</div>
<script type="text/javascript">
// jquery example
var players = VidyardV4.players;
$("#playButton").click(function(){
players[0].play();
$("#pauseButton").removeClass("hide");
$("#playButton").addClass("hide");
});
$("#pauseButton").click(function(){
players[0].pause();
$("#playButton").removeClass("hide");
$("#pauseButton").addClass("hide");
});
</script>
</body>
</html>
</apex:page>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment