chore(examples): update video.js to 8.20.0, update code

JoeTurki · JoeTurki · commit 9a77179d290f · 2025-02-11T10:14:45.000-06:00
diff --git a/README.md b/README.md
@@ -48,7 +48,7 @@ Include [@ceeblue/videojs-plugins][npm-url] in your HTML code as usual with the
 Example:
 
 ```html
-<script src="https://vjs.zencdn.net/8.7.0/video.min.js"></script>
+<script src="https://vjs.zencdn.net/8.20.0/video.min.js"></script>
 <script src="./dist/videojs-plugins.js"></script>
 ```
 
diff --git a/examples/player.html b/examples/player.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<!-- 
+<!--
 	Copyright 2023 Ceeblue B.V.
 -->
 <html lang="en">
@@ -19,9 +19,9 @@
 		integrity="sha384-TbilV5Lbhlwdyc4RuIV/JhD8NR+BfMrvz4BL5QFa2we1hQu6wvREr3v6XSRfCTRp" rel="stylesheet">
 	<link crossorigin="anonymous" href="https://use.fontawesome.com/releases/v5.1.0/css/fontawesome.css"
 		integrity="sha384-ozJwkrqb90Oa3ZNb+yKFW2lToAWYdTiF1vt8JiH5ptTGHTGcN7qdoR1F95e0kYyG" rel="stylesheet">
-	<link href="https://vjs.zencdn.net/8.7.0/video-js.css" rel="stylesheet">
+	<link href="https://vjs.zencdn.net/8.20.0/video-js.css" rel="stylesheet">
 	<link href="../dist/videojs-plugins.css" rel="stylesheet">
-	
+
 	<style>
 		body {
 			margin-top: 1em;
@@ -59,7 +59,7 @@
 					<video ref="videoPlayer" class="video-js vjs-default-skin vjs-fluid" playsinline controls autoplay></video>
 				</div>
 			</div>
-			
+
 			<div class="form-row" v-if="dataMessages.length > 0" disabled>
 				<div class="col-12">
 					<h5>Timed Metadatas</h5>
@@ -76,7 +76,7 @@ <h5>Timed Metadatas</h5>
 							{{ option }}
 						</option>
 					</select>
-				</div>								
+				</div>
 				<div class="form-group col-6 col-sm-4">
 					<input :disabled="isPlaying()" class="form-control"
 						placeholder="Node host" type="text"
@@ -88,8 +88,8 @@ <h5>Timed Metadatas</h5>
 						v-model="quality" title="Stream quality">
 				</div>
 			</div>
-		
-			<div class="form-row">				
+
+			<div class="form-row">
 				<div class="form-group col-6">
 					<input :disabled="isPlaying()" class="form-control"
 						placeholder="Stream name" type="text"
@@ -119,21 +119,21 @@ <h5>Timed Metadatas</h5>
 		// import { createApp } from 'https://cdn.jsdelivr.net/npm/vue@3/dist/vue.esm-browser.js';
 		// production version, optimized for size and speed
 		import { createApp } from 'https://cdn.jsdelivr.net/npm/vue@3/dist/vue.esm-browser.prod.js';
-		import {} from 'https://cdn.jsdelivr.net/npm/webrtc-adapter/out/adapter.js';
-		import {} from 'https://vjs.zencdn.net/8.7.0/video.min.js';
-		import {} from '../dist/videojs-plugins.js';
-		import { Player } from './js/Player.js';
+		import 'https://cdn.jsdelivr.net/npm/webrtc-adapter/out/adapter.js';
+		import 'https://vjs.zencdn.net/8.20.0/video.min.js';
+		import '../dist/videojs-plugins.js';
+    import { Player } from './js/Player.js';
 
 		const SourceType = videojs.getPlugin('SourceController').SourceType;
-        const WebRTCSourceHandler = videojs.getTech('Html5').sourceHandlers.find((value) => value.name == 'ceeblue/videojs-plugins');
-		
+    const WebRTCSourceHandler = videojs.getTech('Html5').sourceHandlers.find((value) => value.name == 'ceeblue/videojs-plugins');
+
 		const {
         	Util,
 			NetAddress,
 			Connect,
 		} = WebRTCSourceHandler.webrtcClient.utils;
 		console.log('webrtc-client version:', WebRTCSourceHandler.webrtcClient.VERSION);
-	
+
 		const PlayState = {
 			PLAYING: 'PLAYING',
 			STARTING: 'STARTING',
@@ -200,7 +200,7 @@ <h5>Timed Metadatas</h5>
 						const playerOptions = {
 							responsive: true,
 							html5: {
-								nativeControlsForTouch: false, 
+								nativeControlsForTouch: false,
 								vhs: {overrideNative: true},
 								nativeAudioTracks: false,
 								nativeVideoTracks: false,
@@ -229,8 +229,8 @@ <h5>Timed Metadatas</h5>
 									src: Connect.buildURL(Connect.Type.WEBRTC, connectParams, protocol).toString(),
 									// Ceeblue specific options
 									iceserver: {
-										urls: ['turn:' + this.host.domain + ':3478?transport=tcp', 'turn:' + this.host.domain + ':3478'], 
-										username: 'ceeblue', 
+										urls: ['turn:' + this.host.domain + ':3478?transport=tcp', 'turn:' + this.host.domain + ':3478'],
+										username: 'ceeblue',
 										credential: 'ceeblue'
 									},
 									audiobutton: this.audiobutton,
@@ -239,7 +239,7 @@ <h5>Timed Metadatas</h5>
 							}
 							sources.push(source);
 						}
-						
+
 						player = new Player(this.$refs.videoPlayer, connectParams, sources, playerOptions);
 						player.on('sourcechanged', (source) => {
 							console.log('sourcechanged', source);
@@ -328,4 +328,4 @@ <h5>Timed Metadatas</h5>
 	</script>
 </body>
 
-</html>
+</html>
diff --git a/examples/simple-player.html b/examples/simple-player.html
@@ -2,12 +2,12 @@
 <html lang="en">
 <head>
   <title>WebRTC Playback demo</title>
-  <link href="https://vjs.zencdn.net/8.7.0/video-js.css" rel="stylesheet">
+  <link href="https://vjs.zencdn.net/8.20.0/video-js.css" rel="stylesheet">
   <link href="../dist/videojs-plugins.css" rel="stylesheet">
 </head>
 <body>
 <script src="https://cdn.jsdelivr.net/npm/webrtc-adapter/out/adapter.js"></script>
-<script src="https://vjs.zencdn.net/8.7.0/video.min.js"></script>
+<script src="https://vjs.zencdn.net/8.20.0/video.min.js"></script>
 <script src="../dist/videojs-plugins.js"></script>
 
 <div id="video_container">
@@ -17,16 +17,16 @@
   import { Player } from "./js/Player.js";
 
   // Replace the source url with host and stream name from query string
-  var url = new URL(window.location.href);
-  var connectParams = {
+  const url = new URL(window.location.href);
+  const connectParams = {
     endPoint: url.searchParams.get("host"),
     streamName: url.searchParams.get("stream"),
     accessToken: url.searchParams.get("accesstoken") || url.searchParams.get("token")
   };
   if (!connectParams.endPoint || !connectParams.streamName) {
     throw new Error("host and stream parameters are required");
   }
-  
+
   // Initialize the video player
   var player = new Player("video-player");
   player.start(connectParams);
diff --git a/examples/webrtc-player.html b/examples/webrtc-player.html
@@ -2,12 +2,12 @@
 <html lang="en">
 <head>
   <title>WebRTC Playback demo</title>
-  <link href="https://vjs.zencdn.net/8.7.0/video-js.css" rel="stylesheet">
+  <link href="https://vjs.zencdn.net/8.20.0/video-js.css" rel="stylesheet">
   <link href="../dist/videojs-plugins.css" rel="stylesheet">
 </head>
 <body>
 <script src="https://cdn.jsdelivr.net/npm/webrtc-adapter/out/adapter.js"></script>
-<script src="https://vjs.zencdn.net/8.7.0/video.min.js"></script>
+<script src="https://vjs.zencdn.net/8.20.0/video.min.js"></script>
 <script src="../dist/videojs-plugins.js"></script>
 
 <div id="video_container">
@@ -17,24 +17,24 @@
     </video>
 </div>
 <script>
-
   // Replace the source url with host and stream name from query string
-  var url = new URL(window.location.href);
-  var host = url.searchParams.get("host");
-  var stream = url.searchParams.get("stream");
-  var accessToken = url.searchParams.get("accesstoken") || url.searchParams.get("token");
+  const url = new URL(window.location.href);
+  const host = url.searchParams.get("host");
+  const stream = url.searchParams.get("stream");
+  const accessToken = url.searchParams.get("accesstoken") || url.searchParams.get("token");
   if (host && stream) {
-    var source = "wss://" + host + "/" + stream;
+    const source = "wss://" + host + "/" + stream;
+
     if (accessToken) {
       source += "?id=" + accessToken;
     }
     document.getElementById("video-player").getElementsByTagName("source")[0].src = source;
   } else {
     throw new Error("host and stream parameters are required");
   }
-  
+
   // Initialize the video player
-  var player = videojs("video-player");
+  const player = videojs("video-player");
   player.qualityButton();
 </script>
 </body>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -85,7 +85,7 @@
     "eslint-config-videojs": "^6.1.0",
     "eslint-plugin-jsdoc": "^46.9.0",
     "global": "^4.4.0",
-    "video.js": "^8.20.0"
+    "video.js": "^8.22.0"
   },
   "devDependencies": {
     "@commitlint/cli": "^19.5.0",
