Skip to content

Commit

Permalink
Printing the code in the samples and added a copy to clipboard button
Browse files Browse the repository at this point in the history
  • Loading branch information
aescarcha committed Jun 11, 2018
1 parent b6cb299 commit a6d184b
Show file tree
Hide file tree
Showing 25 changed files with 167 additions and 75 deletions.
3 changes: 2 additions & 1 deletion samples/audio-only/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
Debug files are not compressed or obfuscated making the file size much larger compared with dash.all.min.js-->
<!--<script src="../../dist/dash.all.min.js"></script>-->

<script>
<script class="code">
function init() {
var video,
player,
Expand Down Expand Up @@ -38,6 +38,7 @@
init();
});
</script>
<script src="../highlighter.js"></script>
</body>
</html>

Expand Down
3 changes: 2 additions & 1 deletion samples/captioning/caption_vtt.html
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
Debug files are not compressed or obfuscated making the file size much larger compared with dash.all.min.js-->
<!--<script src="../../dist/dash.all.min.js"></script>-->

<script>
<script class="code">
function startVideo() {
var url = "https://dash.akamaized.net/akamai/test/caption_test/ElephantsDream/elephants_dream_480p_heaac5_1.mpd",
video = document.querySelector(".dash-video-player video"),
Expand All @@ -34,4 +34,5 @@
<video controls="true"></video>
</div>
</body>
<script src="../highlighter.js"></script>
</html>
5 changes: 3 additions & 2 deletions samples/captioning/multi-track-captions.html
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
Debug files are not compressed or obfuscated making the file size much larger compared with dash.all.min.js-->
<!--<script src="../../dist/dash.all.min.js"></script>-->

<script>
<script class="code">
var EXTERNAL_CAPTION_URL = "https://dash.akamaized.net/dash264/TestCases/4b/qualcomm/1/ED_OnDemand_5SecSeg_Subtitles.mpd", // need to manually seek to get stream to start... issue with MPD but only sample with multi adaptations for external sidecar caption text xml
FRAGMENTED_CAPTION_URL = "https://vm2.dashif.org/dash/vod/testpic_2s/multi_subs.mpd",
videoElement,
Expand Down Expand Up @@ -47,7 +47,7 @@
</style>

<body onload="startVideo()">
<div class="dash-video-player">
<div class="dash-video-player code">
<div class="videoContainer" id="videoContainer">
<video preload="auto" autoplay="true" > </video>
<div id="ttml-rendering-div"></div>
Expand Down Expand Up @@ -83,5 +83,6 @@
</div>
</div>
</div>
<script src="../highlighter.js"></script>
</body>
</html>
5 changes: 3 additions & 2 deletions samples/captioning/ttml-ebutt-sample.html
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
<!--<script src="../../dist/dash.all.min.js"></script>-->


<script>
<script class="code">
/* TEST CONTENT.
https://vm2.dashif.org/dash/vod/testpic_2s/multi_subs.mpd
https://vm2.dashif.org/dash/vod/testpic_2s/stpp_two_regions_multi_color.mpd
Expand Down Expand Up @@ -51,7 +51,7 @@
</style>

<body onload="startVideo()">
<div class="dash-video-player">
<div class="dash-video-player code">
<div class="videoContainer" id="videoContainer">
<video preload="auto" autoplay="true" > </video>
<div id="ttml-rendering-div"></div>
Expand Down Expand Up @@ -87,5 +87,6 @@
</div>
</div>
</div>
<script src="../highlighter.js"></script>
</body>
</html>
5 changes: 3 additions & 2 deletions samples/drm/clearkey.html
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
Debug files are not compressed or obfuscated making the file size much larger compared with dash.all.min.js-->
<!--<script src="../../dist/dash.all.min.js"></script>-->

<script>
<script class="code">
function init() {
const protData = {
"org.w3.clearkey": {
Expand Down Expand Up @@ -37,7 +37,7 @@
</style>
</head>
<body>
<div>
<div >
<video controls="true">
</video>
</div>
Expand All @@ -46,6 +46,7 @@
init();
});
</script>
<script src="../highlighter.js"></script>
</body>
</html>

Expand Down
3 changes: 2 additions & 1 deletion samples/drm/playready.html
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
Debug files are not compressed or obfuscated making the file size much larger compared with dash.all.min.js-->
<!--<script src="../../dist/dash.all.min.js"></script>-->

<script>
<script class="code">
function init() {
const protData = {
"com.microsoft.playready": {
Expand Down Expand Up @@ -47,6 +47,7 @@
init();
});
</script>
<script src="../highlighter.js"></script>
</body>
</html>

Expand Down
3 changes: 2 additions & 1 deletion samples/drm/widevine.html
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
Debug files are not compressed or obfuscated making the file size much larger compared with dash.all.min.js-->
<!--<script src="../../dist/dash.all.min.js"></script>-->

<script>
<script class="code">
function init() {
const protData = {
"com.widevine.alpha": {
Expand Down Expand Up @@ -47,6 +47,7 @@
init();
});
</script>
<script src="../highlighter.js"></script>
</body>
</html>

Expand Down
15 changes: 8 additions & 7 deletions samples/getting-started/auto-load-multi-video.html
Original file line number Diff line number Diff line change
Expand Up @@ -17,28 +17,29 @@
</style>
</head>
<body>
<div>
<div class="code">
<video autoplay controls>
<source src="https://dash.akamaized.net/envivio/EnvivioDash3/manifest.mpd" type="application/dash+xml"/>
</video>
<br/>This is a dash.js player that should autostart<p/>
<br/>This is a dash.js player that should autostart
</div>
<div>
<div class="code">
<video autoplay controls="true">
<source src="http://mediapm.edgesuite.net/ovp/content/test/video/spacealonehd_sounas_640_300.mp4" type="video/mp4"/>
</video>
<br/>This is a standard mp4 (non-dash)<p/>
<br/>This is a standard mp4 (non-dash)
</div>
<div>
<div class="code">
<video poster="http://mediapm.edgesuite.net/will/dash/temp/poster.png" controls="true">
<source src="https://dash.akamaized.net/digitalprimates/fraunhofer/480p_video/heaac_2_0_with_video/Sintel/sintel_480p_heaac2_0.mpd" type="application/dash+xml"/>
</video>
<br/>This is a dash.js player that should not autostart<p/>
<br/>This is a dash.js player that should not autostart
</div>
<div>
<div class="code">
<video data-dashjs-player autoplay src="https://dash.akamaized.net/envivio/EnvivioDash3/manifest.mpd" controls="true">
</video>
<br/>This is a dash.js player that where the manifest is defined via the src attribute of the video element.
</div>
<script src="../highlighter.js"></script>
</body>
</html>
5 changes: 3 additions & 2 deletions samples/getting-started/auto-load-single-video-src.html
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,9 @@
</style>
</head>
<body>
<div>
<video data-dashjs-player autoplay src="https://dash.akamaized.net/envivio/EnvivioDash3/manifest.mpd" controls="true"/>
<div class="code">
<video data-dashjs-player autoplay src="https://dash.akamaized.net/envivio/EnvivioDash3/manifest.mpd" controls="true"></video>
</div>
<script src="../highlighter.js"></script>
</body>
</html>
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
Debug files are not compressed or obfuscated making the file size much larger compared with dash.all.min.js-->
<!--<script src="../../dist/dash.all.min.js"></script>-->

<script>
<script class="code">
var player;

function init()
Expand All @@ -31,19 +31,20 @@
</style>
</head>
<body>
<div>
<div class="code">
<video class="dashjs-player" autoplay controls>
<source src="https://dash.akamaized.net/envivio/EnvivioDash3/manifest.mpd" type="application/dash+xml"/>
</video>
</div>
<div>
<span id="stats"/>
<div class="code">
<span id="stats"></span>
</div>

<script>
document.addEventListener("DOMContentLoaded", function () {
init();
});
</script>
<script src="../highlighter.js"></script>
</body>
</html>
3 changes: 2 additions & 1 deletion samples/getting-started/auto-load-single-video.html
Original file line number Diff line number Diff line change
Expand Up @@ -17,10 +17,11 @@
</style>
</head>
<body>
<div>
<div class="code">
<video autoplay preload="none" controls="true">
<source src="https://dash.akamaized.net/envivio/EnvivioDash3/manifest.mpd" type="application/dash+xml"/>
</video>
</div>
<script src="../highlighter.js"></script>
</body>
</html>
2 changes: 0 additions & 2 deletions samples/getting-started/listening-to-events.html
Original file line number Diff line number Diff line change
Expand Up @@ -132,15 +132,13 @@
<option>TEXT_TRACK_ADDED</option>
<option>TEXT_TRACKS_ADDED</option>
</select>
<p/>
<input type="button" value="LOAD PLAYER" onclick="load(this)"/>
</div>

<div>
<video controls="true">
</video>
<textarea id="trace" placeholder="Trapped events will be displayed here"></textarea>
<p/>
<span id="eventHolder">Events actively being listened to are shown below. Remove the listener by clicking on the event button.<br/></span>
</div>
<script>
Expand Down
7 changes: 4 additions & 3 deletions samples/getting-started/manual-load-single-video.html
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
Debug files are not compressed or obfuscated making the file size much larger compared with dash.all.min.js-->
<!--<script src="../../dist/dash.all.min.js"></script>-->

<script>
<script class="code">
function init() {
var video,
player,
Expand All @@ -29,14 +29,15 @@
</style>
</head>
<body>
<div>
<div class="code">
<video controls="true">
</video>
</div>
<script>
<script class="code">
document.addEventListener("DOMContentLoaded", function () {
init();
});
</script>
<script src="../highlighter.js"></script>
</body>
</html>
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
Debug files are not compressed or obfuscated making the file size much larger compared with dash.all.min.js-->
<!--<script src="../../dist/dash.all.min.js"></script>-->

<script>
<script class="code">
function init() {
var video,
player,
Expand Down Expand Up @@ -46,5 +46,6 @@
init();
});
</script>
<script src="../highlighter.js"></script>
</body>
</html>
3 changes: 2 additions & 1 deletion samples/getting-started/pre-load-video.html
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
Debug files are not compressed or obfuscated making the file size much larger compared with dash.all.min.js-->
<!--<script src="../../dist/dash.all.min.js"></script>-->

<script>
<script class="code">
var video,
player;

Expand Down Expand Up @@ -57,6 +57,7 @@
init();
});
</script>
<script src="../highlighter.js"></script>
</body>

</html>
80 changes: 80 additions & 0 deletions samples/highlighter.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
var head = document.head || document.getElementsByTagName('head')[0];
var body = document.body || document.getElementsByTagName('body')[0];
var style = document.createElement('link');
style.setAttribute('rel', 'stylesheet');
style.setAttribute('href', '//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/monokai-sublime.min.css');
var script = document.createElement('script');
script.setAttribute('src', '//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js');

head.append(style);
head.append(script);

body.innerHTML += '<div style="margin-top: 30px; display: block; width: 100%;"><span style="font-weight: bold; font-size: 1.5em">Source code: <button id="clipboard-copy" style="float: right; margin: 10px 10px 0 0">Copy to clipboard</button></span><pre><code class="html javascript" id="code"></code></pre></div>';

/**
* This helper functions checks how many whitespaces preceed the last tag, which should have 0
* @param html
*/
function calculateStartingWhitespacesCount(html) {
var lines = html.split(/\r?\n/);
var lastLine = lines[lines.length - 1];
return lastLine.search(/\S|$/);
}

function waitForElement() {
if (typeof hljs !== 'undefined'){
hljs.initHighlighting();
}
else {
setTimeout(waitForElement, 100);
}
}

function copyToClipboard() {
var copyText = document.getElementById('code');

if (document.selection) {
var range = document.body.createTextRange();
range.moveToElementText(document.getElementById('code'));
range.select().createTextRange();
document.execCommand("copy");

} else if (window.getSelection) {
var range = document.createRange();
range.selectNode(document.getElementById('code'));
window.getSelection().addRange(range);
document.execCommand("copy");
}
if (window.getSelection) {
window.getSelection().removeAllRanges();
} else if (document.selection) {
document.selection.empty();
}

document.getElementById('clipboard-copy').innerText = 'Copied!';
setTimeout(function() {
document.getElementById('clipboard-copy').innerText = 'Copy to clipboard';
}, 2000);
}

var codeElements = document.getElementsByClassName('code');
for (var i = 0; i < codeElements.length; i++) {
var tag = codeElements[i].cloneNode(true);
var classes = tag.className.replace('code', '');
if (classes === '') {
tag.removeAttribute('class');
} else {
tag.className = classes;
}

// fix indentation
var startingWhitespaces = calculateStartingWhitespacesCount(tag.outerHTML);
var regex = new RegExp('^ {' + startingWhitespaces + '}', 'mg');
document.getElementById('code').innerText += tag.outerHTML.replace(regex, '') + '\n';
}

document.getElementById('clipboard-copy').addEventListener('click', copyToClipboard);

waitForElement();


0 comments on commit a6d184b

Please sign in to comment.