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

@extends('mobile.module.layouts.health')
@push('meta')

@endpush

@push('css')
    <link href="{{ theme_asset('mobile/css/index.css') }}" rel="stylesheet">
    <style>
        .img-box,.img-box img {display: block;width:100%;}
        .module-title .module-title-nav{
            display:block;
            float:left;
            color: #666666;
            text-align: center;
            height: .8rem;
            width: 25%;
            line-height: .8rem;
            text-decoration: none;
        }
        .module-title-content {background: white;padding:10px;width: 100%;box-sizing: border-box;}
        #player-container-id,#player-container-id1,#player-container-id2{
            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')
    {{--    头部--}}
    <div class="headernavfixed">
        <div class="headernav font18">
            <div class="title">
                <div class="n-tit-box">
                    认识晋江
                </div>
                <div class="return js-back for-event" data-href="{{route('mobile.health.index')}}"></div>
            </div>
        </div>
    </div>
    <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>
    <div class="listmod">
        <div class="eattitle list_height t1">
            创晋江
        </div>
        <div class="picmod">
            <video id="player-container-id1"  preload="auto" playsinline webkit-playsinline>
            </video>
            <div class="clear"></div>
        </div>
    </div>
    <div class="listmod">
        <div class="eattitle list_height t1">
            泉州人才港湾计划
        </div>
        <div class="picmod">
            <video id="player-container-id2"  preload="auto" playsinline webkit-playsinline>
            </video>
            <div class="clear"></div>
        </div>
    </div>

@endsection

@section('script')
    <script>
        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.png') }}",
        });

        var player1 = TCPlayer('player-container-id1', {
            sources: [{
                src: '{{ theme_asset('mobile/chuangjinjiang.mp4') }}?v=2', // 播放地址
            }],
            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 player2 = TCPlayer('player-container-id2', {
            sources: [{
                src: '{{ theme_asset('mobile/gangwanjihua.mp4') }}?v=2', // 播放地址
            }],
            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