Главная Обзор Помощь
Войти
tum
/
cam-demo
Следить 1
В избранное 0
Ответвить 0
Код Обсуждения 0 Запросы на слияние 0 Коммиты 4 Релизы 0 Вики
Просмотр исходного кода

alpine

tum лет назад: 3
Родитель
0032e20e2d
Сommit
121dfee56f
2 измененных файлов с 74 добавлено и 34 удалено
Разделённый вид Показать статистику Diff
  1. 47 0
      templates/base.html
  2. 27 34
      templates/index.html

+ 47 - 0
templates/base.html
Просмотреть файл 

@@ -0,0 +1,47 @@
1 
+<!DOCTYPE html>
2 
+<html lang="en">
3 
+<head>
4 
+    <meta charset="UTF-8">
5 
+    <title>{{ title }}</title>
6 
+    <link href="http://vjs.zencdn.net/6.2.8/video-js.css" rel="stylesheet">
7 
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
8 
+    <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
9 
+
10 
+</head>
11 
+<body>
12 
+    <div class='container'>
13 
+{% block main %}
14 
+{% endblock %}
15 
+    </div>
16 
+  <script src="http://vjs.zencdn.net/6.2.8/video.js"></script>
17 
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
18 
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.12.2/videojs-contrib-hls.min.js"></script>
19 
+  <script>
20 
+
21 
+      function video_init() {
22 
+          return {
23 
+
24 
+              init() {
25 
+                  //this.$refs.player.play()
26 
+                  //var player = videojs(this.$refs.player, {width: 480, height: 270});
27 
+                  //player.play();
28 
+                  // This code will be executed before Alpine
29 
+                  // initializes the rest of the component.
30 
+              },
31 
+              vdo(el) {
32 
+                  console.log(el)
33 
+                  var player = videojs(el, {width:480, height:270})
34 
+                  player.play()
35 
+              },
36 
+              search: '',
37 
+              items: ['1001', '2001', '3001', '4001'],
38 
+                get filteredItems() {
39 
+                    return this.items.filter(
40 
+                        i => i.startsWith(this.search)
41 
+                    )
42 
+                }
43 
+          }
44 
+      }
45 
+ </script>
46 
+</body>
47 
+</html>

+ 27 - 34
templates/index.html
Просмотреть файл 

@@ -1,34 +1,27 @@
1 
-<!DOCTYPE html>
2 
-<html>
3 
-   <head>
4 
-      <meta charset="utf-8">
5 
-      <title>Test</title>
6 
-      <link href="http://vjs.zencdn.net/6.2.8/video-js.css" rel="stylesheet">
7 
-    <meta charset="utf-8">
8 
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
9 
-
10 
-    <!-- Bootstrap CSS -->
11 
-    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
12 
-          integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
13 
-   </head>
14 
-   <body>
15 
-       <div class='container'>
16 
-           <div class='row'>
17 
-               <div class='col-md-6'>
18 
-                   <video id="player" class="video-js vjs-default-skin" controls preload>
19 
-                       <source src="./video/cctv.m3u8" type="application/x-mpegURL">
20 
-                   </video>
21 
-               </div>
22 
-               <div class='col-md-6'>
23 
-                   <img src="http://localhost:9099/video_feed/0/" width="100%">
24 
-               </div>
25 
-           </div>
26 
-       </div>
27 
-    <script src="https://vjs.zencdn.net/7.20.3/video.min.js"></script>
28 
-      <script src="https://unpkg.com/@videojs/http-streaming@2.15.1/dist/videojs-http-streaming.js"></script>
29 
-      <script>
30 
-          var player = videojs('player', {width: 480, height:270 });
31 
-          player.play();
32 
-     </script>
33 
-   </body>
34 
-</html>
1 
+{% extends 'base.html' %}
2 
+{% block main %}
3 
+<div class='row'>
4 
+    <div x-data="video_init">
5 
+        <div class='row p-2'>
6 
+            <input x-model="search" placeholder="Search..." class='form-control'>
7 
+        </div>
8 
+            <div class='row'>
9 
+                <template x-for="item in filteredItems" :key="item">
10 
+                    <div class='col-md-6 mb-2 text-center' x-if="item == '1001'">
11 
+                    <img src="http://localhost:9099/video_feed/0/" width="100%">
12 
+                          <br>
13 
+                        <strong x-text='item'></strong>
14 
+
15 
+                    </div>
16 
+                    <div class='col-md-6 mb-2 text-center' x-if="item != '1001'">
17 
+                       <video x-init="vdo($el)"  class="video-js vjs-default-skin" controls preload autoplay muted>
18 
+                           <source src="./video/cctv.m3u8" type="application/x-mpegURL">
19 
+                       </video>
20 
+                        <br>
21 
+                        <strong x-text='item'></strong>
22 
+                    </div>
23 
+                </template>
24 
+            </div>
25 
+    </div>
26 
+</div>
27 
+{% endblock %}