更新视频

public/themes/default/views/mobile/app/health/jinjiang.blade.php

@@ -18,11 +18,28 @@
             text-decoration: none;
         }
         .module-title-content {background: white;padding:10px;width: 100%;box-sizing: border-box;}
+        #player-container-id{
+            width: 100%;
+            height: 0;
+            padding-bottom: 56.25%; /* 16:9 宽高比 */
+            position: relative;
+            display: inline-block;
+
+        }
+        video {
+            width: 100%;
+            height: 100%;
+            position: absolute;
+            top: 0;
+            left: 0;
+        }
     </style>
+    <link href="{{ theme_asset('mobile/css/personal.css') }}" rel="stylesheet">
+    <link href="https://web.sdk.qcloud.com/player/tcplayer/release/v5.1.0/tcplayer.min.css" rel="stylesheet"/>
 @endpush
 
 @push('js')
-
+    <script src="https://web.sdk.qcloud.com/player/tcplayer/release/v5.1.0/tcplayer.v5.1.0.min.js"></script>
 @endpush
 
 @section('content')
@@ -37,52 +54,74 @@
             </div>
         </div>
     </div>
-    
-    <div class="img-box">
-        <img src="/themes/default/assets/mobile/images/health/jinjiang1.png" alt="">
-        <img src="/themes/default/assets/mobile/images/health/jinjiang2.png" alt="">
-        <img src="/themes/default/assets/mobile/images/health/jinjiang3.png" alt="">
-        <img src="/themes/default/assets/mobile/images/health/jinjiang4.png" alt="">
-        <img src="/themes/default/assets/mobile/images/health/jinjiang5.png" alt="">
-        <img src="/themes/default/assets/mobile/images/health/jinjiang8.png" alt="">
-        <img src="/themes/default/assets/mobile/images/health/jinjiang9.png" alt="">
-        <img src="/themes/default/assets/mobile/images/health/jinjiang10.png" alt="">
-        <img src="/themes/default/assets/mobile/images/health/jinjiang11.png" alt="">
-        <img src="/themes/default/assets/mobile/images/health/jinjiang7.png" alt="">
-    </div>
-    <div class="module">
-        <div class="module-title font14">
-            <a href="javascript:;" class="module-title-nav font14 active f-left" data-name="commerce">商贸物流</a>
-            <a href="javascript:;" class="module-title-nav font14 f-left" data-name="internet">互联网及信息</a>
-            <a href="javascript:;" class="module-title-nav font14 f-left" data-name="finance">金融服务</a>
-            <a href="javascript:;" class="module-title-nav font14 f-left" data-name="culture">文化旅游</a>
+    <div class="listmod">
+        <div class="eattitle list_height t1">
+            大爱之城，健康晋江
+        </div>
+        <div class="picmod">
+            <video id="player-container-id"  preload="auto" playsinline webkit-playsinline>
+            </video>
             <div class="clear"></div>
         </div>
-        <div class="module-title-content" id="commerce">
-            发展以海港、空港、陆港和出口加工区、高铁物流为龙头的现代物流服务业，拓展以物流信息和第三、第四方物流服务，完善“物流基地-分拨中心-配送中心”三位一体服务网络，巩固提升大宗货物海、陆、空、铁联运区域枢纽地位。
+    </div>
+    <div class="listmod">
+        <div class="eattitle list_height t1">
+            创晋江
         </div>
-        <div class="module-title-content" id="internet">
-            培育“互联网+”、大数据、云计算、软件开发、网络安全、系统集成等网络信息服务业，加快信息经济与产业经济、社会事业融合发展。
+        <div class="picmod">
+            <video id="player-container-id1"  preload="auto" playsinline webkit-playsinline>
+            </video>
+            <div class="clear"></div>
         </div>
-        <div class="module-title-content" id="finance">
-            大力推进金融服务机制创新、产品创新、市场创新，拓展互联网金融、农地金融、科技金融等新型金融业态，推动金融业与实体经济融合发展。
+    </div>
+    <div class="listmod">
+        <div class="eattitle list_height t1">
+            泉州人才港湾计划
         </div>
-        <div class="module-title-content" id="culture">
-            规划自然生态、人文古迹、特色产业等旅游资源，深度挖掘中原文化、闽越文化、海交文化等传统文化及近代战地文化、现代工业文明的丰富内涵，打造“海丝”沿线多元文化旅游目的地。
+        <div class="picmod">
+            <video id="player-container-id2"  preload="auto" playsinline webkit-playsinline>
+            </video>
+            <div class="clear"></div>
         </div>
     </div>
+
 @endsection
 
 @section('script')
     <script>
-        $('.module-title-content').hide();
-        $('#commerce').show();
-        $('.module-title-nav').click(function(){
-            const name = $(this).data('name');
-            $('.module-title-content').hide();
-            $('#'+name).show();
-            $('.module-title-nav').removeClass('active');
-            $(this).addClass('active');
+        var player = TCPlayer('player-container-id', {
+            sources: [{
+                src: '{{ theme_asset('mobile/0e93030f7d1d74f6d738bbbd4511e2a6.mp4') }}?v=1', // 播放地址
+            }],
+            autoplay: true,
+            licenseUrl: 'https://license.vod2.myqcloud.com/license/v2/1251164517_1/v_cube.license', // license 地址，参考准备工作部分，在视立方控制台申请 license 后可获得 licenseUrl
+            posterImage: true,
+            bigPlayButton: true,
+            poster: "{{ theme_asset('mobile/images/health_thumb.jpg') }}",
+        });
+
+        var player = TCPlayer('player-container-id1', {
+            sources: [{
+                src: '{{ theme_asset('mobile/chuangjinjiang.mp4') }}?v=1', // 播放地址
+            }],
+            autoplay: true,
+            licenseUrl: 'https://license.vod2.myqcloud.com/license/v2/1251164517_1/v_cube.license', // license 地址，参考准备工作部分，在视立方控制台申请 license 后可获得 licenseUrl
+            posterImage: true,
+            bigPlayButton: true,
+            poster: "{{ theme_asset('mobile/chuangjinjiang.jpg') }}",
         });
+
+        var player = TCPlayer('player-container-id2', {
+            sources: [{
+                src: '{{ theme_asset('mobile/gangwanjihua.mp4') }}?v=1', // 播放地址
+            }],
+            autoplay: true,
+            licenseUrl: 'https://license.vod2.myqcloud.com/license/v2/1251164517_1/v_cube.license', // license 地址，参考准备工作部分，在视立方控制台申请 license 后可获得 licenseUrl
+            posterImage: true,
+            bigPlayButton: true,
+            poster: "{{ theme_asset('mobile/gangwanjihua.jpg') }}",
+        });
+
+
     </script>
 @endsection