mirror of
https://github.com/shaka-project/shaka-player.git
synced 2026-06-25 17:45:03 +03:00
Joey Parrish
03964e4c84
This interfered with key rotation, and was not widely used. Removing the feature is the more general approach, and the worst that will happen is that some applications will see more sessions than they strictly need. Change-Id: Ide2238433af296e729e4401711672fb17257093e
238 lines
7.4 KiB
Plaintext
238 lines
7.4 KiB
Plaintext
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>TurtleTube - Beta!</title>
|
|
<!-- Load the Shaka Player library. -->
|
|
<script src="shaka-player.compiled.js"></script>
|
|
<style>
|
|
body {
|
|
background-color: #4a8;
|
|
color: #000;
|
|
}
|
|
h1, h2 {
|
|
text-align: center;
|
|
}
|
|
#thumbContainer {
|
|
display: table;
|
|
margin: auto;
|
|
}
|
|
.thumbRow {
|
|
display: table-row;
|
|
}
|
|
.thumbCell {
|
|
display: table-cell;
|
|
width: 270px;
|
|
padding: 10px;
|
|
}
|
|
.thumbCell img {
|
|
width: 270px;
|
|
height: 180px;
|
|
border: 5px ridge #07a;
|
|
margin: 0;
|
|
}
|
|
#videoOverlay {
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
position: fixed;
|
|
top: 2px;
|
|
left: 2px;
|
|
right: 2px;
|
|
bottom: 2px;
|
|
z-index: 1;
|
|
overflow: hidden;
|
|
text-align: center;
|
|
/* Hidden until needed. */
|
|
display: none;
|
|
}
|
|
#closeButton {
|
|
position: relative;
|
|
margin-top: 10px;
|
|
z-index: 2;
|
|
}
|
|
#vcenterWrapper {
|
|
position: absolute;
|
|
width: 0;
|
|
height: 0;
|
|
/* Move the top-left corner of this div to the center. */
|
|
top: 50%;
|
|
left: 50%;
|
|
}
|
|
#video {
|
|
width: 640px;
|
|
height: 480px;
|
|
position: relative;
|
|
/* Center the video inside the overlay. */
|
|
top: -240px;
|
|
left: -320px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>TurtleTube!</h1>
|
|
<h2>Choose a video:</h2>
|
|
|
|
<div id="thumbContainer">
|
|
<div class="thumbRow">
|
|
<div class="thumbCell">
|
|
<img id="t1"
|
|
src="http://turtle-tube.appspot.com/t/t1/thumb.png"
|
|
onclick="onImageClick(this)"><br>
|
|
<i>cute green sea turtle in Ko'olina Hawai'i</i><br>
|
|
(MP4, WebM)
|
|
</div>
|
|
<div class="thumbCell">
|
|
<img id="t2"
|
|
src="http://turtle-tube.appspot.com/t/t2/thumb.png"
|
|
onclick="onImageClick(this)"><br>
|
|
<i>Endangered Ocean: Sea Turtles</i><br>
|
|
(MP4, WebM)
|
|
</div>
|
|
</div>
|
|
<div class="thumbRow">
|
|
<div class="thumbCell">
|
|
<img id="t3"
|
|
src="http://turtle-tube.appspot.com/t/t3/thumb.png"
|
|
onclick="onImageClick(this)"><br>
|
|
<i>sea turtles exercise: bent arms</i><br>
|
|
(WebM only)
|
|
</div>
|
|
<div class="thumbCell">
|
|
<img id="t4"
|
|
src="http://turtle-tube.appspot.com/t/t4/thumb.png"
|
|
onclick="onImageClick(this)"><br>
|
|
<i>sea turtles exercise: straight arms</i><br>
|
|
(WebM only)
|
|
</div>
|
|
</div>
|
|
<div class="thumbRow">
|
|
<div class="thumbCell">
|
|
<img id="t5"
|
|
src="http://turtle-tube.appspot.com/t/t5/thumb.png"
|
|
onclick="onImageClick(this)"><br>
|
|
<i>Using robots to reveal secrets of walking baby sea turtles</i><br>
|
|
(MP4, WebM)
|
|
</div>
|
|
<div class="thumbCell">
|
|
<img id="e6"
|
|
src="http://turtle-tube.appspot.com/t/e6/thumb.png"
|
|
onclick="onImageClick(this)"><br>
|
|
<i>kitten vs sea turtle</i><br>
|
|
(MP4 only, encrypted)
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="videoOverlay">
|
|
<div id="vcenterWrapper">
|
|
<video id="video"
|
|
poster="http://turtle-tube.appspot.com/poster.jpg"
|
|
crossorigin="anonymous"
|
|
controls autoplay>
|
|
Your browser does not support HTML5 video.
|
|
</video>
|
|
</div>
|
|
<button id="closeButton" onclick="closeVideo()">Close Video</button>
|
|
</div>
|
|
</body>
|
|
<script>
|
|
var video;
|
|
var player;
|
|
var estimator;
|
|
|
|
function initPlayer() {
|
|
// Install polyfills.
|
|
shaka.polyfill.Fullscreen.install();
|
|
shaka.polyfill.MediaKeys.install();
|
|
shaka.polyfill.VideoPlaybackQuality.install();
|
|
|
|
// Get the video element.
|
|
video = document.getElementById('video');
|
|
|
|
// Construct the Player to wrap around it.
|
|
player = new shaka.player.Player(video);
|
|
|
|
// Attach the player to the window so that it can be easily debugged.
|
|
window.player = player;
|
|
|
|
// Listen for errors from the Player.
|
|
player.addEventListener('error', function(event) {
|
|
console.error(event);
|
|
});
|
|
|
|
// Construct a persistent bandwidth estimator to pass to video sources.
|
|
// This will allow second and subsequent playbacks to benefit from
|
|
// earlier bandwidth estimations and avoid starting at a low-quality
|
|
// stream.
|
|
estimator = new shaka.util.EWMABandwidthEstimator();
|
|
}
|
|
|
|
/**
|
|
* @param {!HTMLImageElement} image
|
|
*/
|
|
function onImageClick(image) {
|
|
// Disregard any bandwidth data older than one hour. The user may have
|
|
// changed networks if they are on a laptop or mobile device.
|
|
if (estimator.getDataAge() >= 3600) {
|
|
estimator = new shaka.util.EWMABandwidthEstimator();
|
|
}
|
|
|
|
// Construct a DashVideoSource to represent the DASH manifest and provide
|
|
// a callback to interpret the ContentProtection elements (if any).
|
|
var mpdUrl = 'http://turtle-tube.appspot.com/t/' + image.id + '/dash.mpd';
|
|
var source = new shaka.player.DashVideoSource(mpdUrl,
|
|
interpretContentProtection,
|
|
estimator);
|
|
|
|
// Show the video player overlay.
|
|
var overlay = document.getElementById('videoOverlay');
|
|
overlay.style.display = 'block';
|
|
|
|
// Load the source into the Player.
|
|
player.load(source);
|
|
}
|
|
|
|
/**
|
|
* @param {!shaka.dash.mpd.ContentProtection} contentProtection The
|
|
* ContentProtection element from the MPD.
|
|
* @return {shaka.player.DrmSchemeInfo} or null if the element is not
|
|
* understood by this application.
|
|
*/
|
|
function interpretContentProtection(contentProtection) {
|
|
// This is the UUID which is used by edash-packager to represent
|
|
// Widevine. This is the only scheme we are expecting for this
|
|
// application.
|
|
if (contentProtection.schemeIdUri ==
|
|
'urn:uuid:edef8ba9-79d6-4ace-a3c8-27dcd51d21ed') {
|
|
// We will use Widevine's testing license server. In a real app,
|
|
// you would run your own front-end service for this.
|
|
var licenseServerUrl = 'http://widevine-proxy.appspot.com/proxy';
|
|
|
|
// The EME key system identifier for Widevine.
|
|
var keySystem = 'com.widevine.alpha';
|
|
|
|
return new shaka.player.DrmSchemeInfo(keySystem,
|
|
licenseServerUrl,
|
|
false /* withCredentials */,
|
|
null /* initData */,
|
|
null /* licensePostProcessor */);
|
|
}
|
|
|
|
// See app.interpretContentProtection_() in app.js for more examples of
|
|
// what this callback can do.
|
|
|
|
console.warn('Unrecognized scheme: ' + contentProtection.schemeIdUri);
|
|
return null;
|
|
}
|
|
|
|
function closeVideo() {
|
|
// Unload the video source.
|
|
player.unload();
|
|
|
|
// Hide the video player overlay.
|
|
var overlay = document.getElementById('videoOverlay');
|
|
overlay.style.display = 'none';
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', initPlayer);
|
|
</script>
|
|
</html>
|