base index

templates/base.html

                   player.play()
               }, 
               search: '',
-              items: ['1001', '2001'],
+              items: ['1001', '3001'],
                 get filteredItems() {
                     return this.items.filter(
                         i => i.startsWith(this.search)

templates/index.html

         <div class='row p-2'>
             <input x-model="search" placeholder="Search..." class='form-control'>
         </div>
+                           <video x-init="vdo($el)"  class="video-js vjs-default-skin m-auto" controls preload autoplay muted>
+                               <source src="./video/cctv.m3u8" type="application/x-mpegURL">
+                           </video>
             <div class='row'>
                 <template x-for="item in filteredItems" :key="item">
                     <div class='col-md-6 mb-2 text-center'>
                     <img src="http://localhost:9099/video_feed/0/" width="480">
                           
                         </template>
-                        <template x-if="item != '1001'">
-                           <video x-init="vdo($el)"  class="video-js vjs-default-skin m-auto" controls preload autoplay muted>
-                               <source src="./video/cctv.m3u8" type="application/x-mpegURL">
-                           </video>
+                        <template x-if="item == '3001'">
+                    <img src="http://localhost:9024/video_feed/0/" width="480">
+                          
                         </template>
                         <p>
                         <strong x-text='item'></strong></p>