mirror of
https://github.com/shaka-project/shaka-player.git
synced 2026-06-17 16:26:39 +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
318 lines
9.7 KiB
Plaintext
318 lines
9.7 KiB
Plaintext
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>TurtleTube - Beta (HD)!</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: 426px;
|
|
position: relative;
|
|
/* Center the video inside the overlay. */
|
|
left: -320px;
|
|
top: -213px;
|
|
}
|
|
#errorOverlay {
|
|
border: 2px solid black;
|
|
background-color: rgba(100, 0, 0, 0.5);
|
|
font-size: 175%;
|
|
white-space: pre-line;
|
|
width: 350px;
|
|
height: 200px;
|
|
position: absolute;
|
|
/* Center the error inside the video overlay. */
|
|
left: -175px;
|
|
top: -100px;
|
|
/* Hidden until needed. */
|
|
display: none;
|
|
}
|
|
#hd {
|
|
position: absolute;
|
|
opacity: 0.6;
|
|
/* Hidden until needed. */
|
|
display: none;
|
|
}
|
|
</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>
|
|
<img id="hd" src="http://turtle-tube.appspot.com/hd.png">
|
|
<div id="errorOverlay"></div>
|
|
</div>
|
|
<button id="closeButton" onclick="closeVideo()">Close Video</button>
|
|
</div>
|
|
</body>
|
|
<script>
|
|
var video;
|
|
var hd;
|
|
var player;
|
|
var estimator;
|
|
|
|
function initPlayer() {
|
|
// Install polyfills.
|
|
shaka.polyfill.Fullscreen.install();
|
|
shaka.polyfill.MediaKeys.install();
|
|
shaka.polyfill.VideoPlaybackQuality.install();
|
|
|
|
// Get important elements.
|
|
video = document.getElementById('video');
|
|
hd = document.getElementById('hd');
|
|
|
|
// 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 adaptation events.
|
|
player.addEventListener('adaptation', onAdaptation);
|
|
|
|
// Listen for errors from the Player.
|
|
player.addEventListener('error', onError);
|
|
|
|
// 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 {!Event} event
|
|
*/
|
|
function onAdaptation(event) {
|
|
// Ignore non-video adaptation events.
|
|
if (event.contentType != 'video') {
|
|
return;
|
|
}
|
|
|
|
// Resize the video element to match the content's aspect ratio.
|
|
var aspect = event.size.width / event.size.height;
|
|
var w = video.offsetWidth;
|
|
var h = w / aspect;
|
|
video.style.width = w + 'px';
|
|
video.style.height = h + 'px';
|
|
video.style.left = (-w / 2) + 'px';
|
|
video.style.top = (-h / 2) + 'px';
|
|
|
|
// Position the HD icon in the top-right of the video element.
|
|
// 0,0 for this icon is the center of the video element.
|
|
hd.style.top = ((-h / 2) + 5) + 'px';
|
|
hd.style.right = ((-w / 2) + 5) + 'px';
|
|
|
|
// If the video is 720p or above, show the HD icon.
|
|
if (event.size.height >= 720) {
|
|
hd.style.display = 'block';
|
|
} else {
|
|
hd.style.display = 'none';
|
|
}
|
|
}
|
|
|
|
/**
|
|
* @param {!Event} event
|
|
*/
|
|
function onError(event) {
|
|
var overlay = document.getElementById('errorOverlay');
|
|
// This contains details about the error.
|
|
var error = event.detail;
|
|
|
|
// Format a message to show to the user in the overlay.
|
|
var text = 'Error (' + error.type + '):\n';
|
|
text += error.message;
|
|
|
|
// Display it.
|
|
overlay.textContent = text;
|
|
overlay.style.display = 'block';
|
|
|
|
// It would also be a good idea to log an anonymized version of the error
|
|
// object to the server.
|
|
}
|
|
|
|
/**
|
|
* @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';
|
|
|
|
// Hide the error overlay.
|
|
overlay = document.getElementById('errorOverlay');
|
|
overlay.style.display = 'none';
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', initPlayer);
|
|
</script>
|
|
</html>
|