Printing the code in the samples and added a copy to clipboard button

Dash-Industry-Forum · Jun 11, 2018 · 4c1e4bd · 4c1e4bd
1 parent b6cb299
commit 4c1e4bd
Show file tree

Hide file tree

Showing 23 changed files with 178 additions and 81 deletions.
diff --git a/samples/audio-only/index.html b/samples/audio-only/index.html
@@ -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,
@@ -29,15 +29,16 @@
     </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>
 

diff --git a/samples/captioning/caption_vtt.html b/samples/captioning/caption_vtt.html
@@ -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"),
@@ -30,8 +30,9 @@
     </style>
 
     <body onload="startVideo()">
-        <div class="dash-video-player">
+        <div class="dash-video-player code">
             <video controls="true"></video>
         </div>
     </body>
+    <script src="../highlighter.js"></script>
 </html>
diff --git a/samples/captioning/multi-track-captions.html b/samples/captioning/multi-track-captions.html
@@ -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,
@@ -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>
@@ -83,5 +83,6 @@
                 </div>
             </div>
         </div>
+        <script src="../highlighter.js"></script>
     </body>
 </html>
diff --git a/samples/captioning/ttml-ebutt-sample.html b/samples/captioning/ttml-ebutt-sample.html
@@ -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
@@ -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>
@@ -87,5 +87,6 @@
                 </div>
             </div>
         </div>
+        <script src="../highlighter.js"></script>
     </body>
 </html>
diff --git a/samples/drm/clearkey.html b/samples/drm/clearkey.html
@@ -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": {
@@ -37,15 +37,16 @@
     </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>
 

diff --git a/samples/drm/playready.html b/samples/drm/playready.html
@@ -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": {
@@ -38,15 +38,16 @@
     </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>
 

diff --git a/samples/drm/widevine.html b/samples/drm/widevine.html
@@ -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": {
@@ -38,15 +38,16 @@
     </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>
 

diff --git a/samples/getting-started/auto-load-multi-video.html b/samples/getting-started/auto-load-multi-video.html
@@ -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>
diff --git a/samples/getting-started/auto-load-single-video-src.html b/samples/getting-started/auto-load-single-video-src.html
@@ -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>
diff --git a/samples/getting-started/auto-load-single-video-with-reference.html b/samples/getting-started/auto-load-single-video-with-reference.html
@@ -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()
@@ -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>
+        <div class="code">
             <span id="stats"/>
         </div>
 
-        <script>
+        <script class="code">
             document.addEventListener("DOMContentLoaded", function () {
                 init();
             });
         </script>
+        <script src="../highlighter.js"></script>
     </body>
 </html>
diff --git a/samples/getting-started/auto-load-single-video.html b/samples/getting-started/auto-load-single-video.html
@@ -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>
diff --git a/samples/getting-started/listening-to-events.html b/samples/getting-started/listening-to-events.html
@@ -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,firstLoad = true;
 
         function init() {
@@ -132,21 +132,20 @@
             <option>TEXT_TRACK_ADDED</option>
             <option>TEXT_TRACKS_ADDED</option>
         </select>
-        <p/>
             <input type="button" value="LOAD PLAYER" onclick="load(this)"/>
         </div>
 
-        <div>
+        <div class="code">
             <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>
+        <script class="code">
             document.addEventListener("DOMContentLoaded", function () {
                 init();
             });
         </script>
+        <script src="../highlighter.js"></script>
     </body>
 </html>
diff --git a/samples/getting-started/manual-load-single-video.html b/samples/getting-started/manual-load-single-video.html
@@ -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,
@@ -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>
diff --git a/samples/getting-started/pre-load-video.html b/samples/getting-started/pre-load-video.html
@@ -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;
 
@@ -47,16 +47,17 @@
         This sample shows how to use preload feature of dash.js. In this sample, streaming is initialized and dash.js starts downloading stream segments as soon as the page is loaded. Right when the user clicks "Attach View" the video element is created,
         attached to the already initialized dash.js MediaPlayer and then playback starts.
     </div>
-    <div>
+    <div class="code">
         <button onclick="attachVideoPlayer()">Attach View</button>
     </div>
-    <div id="videoContainer">
+    <div class="code" id="videoContainer">
     </div>
-    <script>
+    <script class="code">
         document.addEventListener("DOMContentLoaded", function () {
             init();
         });
     </script>
+    <script src="../highlighter.js"></script>
 </body>
 
 </html>