Skip to content

Instantly share code, notes, and snippets.

@andrewmcodes
Created September 21, 2023 03:22
Show Gist options
  • Save andrewmcodes/42daa9dd406d93f97b14c46f0e22a6dd to your computer and use it in GitHub Desktop.
Save andrewmcodes/42daa9dd406d93f97b14c46f0e22a6dd to your computer and use it in GitHub Desktop.
alksjd
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="styles/common.css" />
<link rel="stylesheet" href="styles/playlist.css" />
</head>
<body>
<div class="container centered">
<header>
<img src="./wistia-logo.png" height="40" />
</header>
<div class="main">
<div class="wistia_embed" style="width: 640px; height: 360px"></div>
<ul id="medias" class="list--unstyled"></ul>
</div>
<div class="player_title"></div>
</div>
<template id="media-template">
<li class="media">
<a class="media-content link--unstyled" href="javascript:void(0)">
<img class="thumbnail" />
<div class="description">
<div class="title"></div>
<div class="duration label--sm"></div>
</div>
</a>
</li>
</template>
<script src="/src/app.js" charset="utf-8"></script>
<script src="/src/adapter.js" charset="utf-8"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="/src/common.js"></script>
<script src="/src/playlist.js"></script>
<script
charset="ISO-8859-1"
src="//fast.wistia.com/assets/external/E-v1.js"
async
></script>
<script>
// PostRoll Screen with Thumbnail of next video and eventually the countdown
// When the first video ends, the `end` event is triggered and the `setTimeout` function is called with a delay of 5 seconds. After the delay, the `replaceWith` method is called on the `video` object with the video ID of the next video and a transition of "slide". This will replace the current video with the next video in the playlist and play it automatically.
window._wq = window._wq || [];
_wq.push({
id: "_all",
options: {
plugin: {
"postRoll-v1": {
raw: '<div>Up Next</div><br/><p><img src="https://embed-ssl.wistia.com/deliveries/74ed8a4b42f47bfc423e1cbfff78952763686b4d.jpg" width="220" height="132"></p><div>Meet Lenny - #StartPup</div><br/>',
},
},
},
onReady: function (video) {
video.bind("end", function () {
setTimeout(function () {
var nextVideoId = "fcztba4fz8";
var nextVideoIndex = playlist.findIndex(function (item) {
return item.id === nextVideoId;
});
if (nextVideoIndex !== -1 && !playlist[nextVideoIndex].played) {
video.replaceWith(nextVideoId, { transition: "slide" });
video.play();
playlist[nextVideoIndex].played = true;
}
}, 5000); // wait for 5 seconds
});
},
});
// For the autoplay of the first video
_wq.push(function (W) {
var playedOnce = false;
W.api(function (video) {
if (!playedOnce) {
playedOnce = true;
video.play();
var firstVideoId = video.hashedId();
playlist.push({ id: firstVideoId, played: true });
}
});
});
var playlist = [
{ id: "fcztba4fz8", played: false },
{ id: "jz7a5jz1x4", played: false },
{ id: "8jz6jz1x4", played: false },
];
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment