|
@@ -20,12 +20,29 @@
|
|
|
.nav.black {background: linear-gradient(135deg, #292a3a, #536976);}
|
|
|
|
|
|
.module-title .module-title-nav {width: 100%;}
|
|
|
+ #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('app/css/swiper.min.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')
|
|
@@ -43,13 +60,8 @@
|
|
|
<div class="swiper-container">
|
|
|
<div class="swiper-wrapper">
|
|
|
<div class="swiper-slide">
|
|
|
- <img src="{{ theme_asset('mobile/images/health/header_swiper_1.jpg') }}" />
|
|
|
- </div>
|
|
|
- <div class="swiper-slide">
|
|
|
- <img src="{{ theme_asset('mobile/images/health/header_swiper_2.png') }}" />
|
|
|
- </div>
|
|
|
- <div class="swiper-slide">
|
|
|
- <img src="{{ theme_asset('mobile/images/health/header_swiper_3.jpg') }}" />
|
|
|
+ <video id="player-container-id" preload="auto" playsinline webkit-playsinline>
|
|
|
+ </video>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -86,11 +98,18 @@
|
|
|
@endsection
|
|
|
|
|
|
@section('script')
|
|
|
- <script type="text/javascript" src="{{theme_asset('app/js/swiper.min.js')}}"></script>
|
|
|
+{{-- <script type="text/javascript" src="{{theme_asset('app/js/swiper.min.js')}}"></script>--}}
|
|
|
<script>
|
|
|
- // 初始化SWiper
|
|
|
- var mySwiper = new Swiper('.swiper-container',{
|
|
|
- autoplay:3000,
|
|
|
+ var player = TCPlayer('player-container-id', {
|
|
|
+ sources: [{
|
|
|
+ src: '{{ theme_asset('mobile/0e93030f7d1d74f6d738bbbd4511e2a6.mp4') }}', // 播放地址
|
|
|
+ }],
|
|
|
+ licenseUrl: 'https://license.vod2.myqcloud.com/license/v2/1251164517_1/v_cube.license', // license 地址,参考准备工作部分,在视立方控制台申请 license 后可获得 licenseUrl
|
|
|
+
|
|
|
});
|
|
|
+ // 初始化SWiper
|
|
|
+ // var mySwiper = new Swiper('.swiper-container',{
|
|
|
+ // autoplay:3000,
|
|
|
+ // });
|
|
|
</script>
|
|
|
@endsection
|