MicroCommunityWeb/public/components/property/cameraControlVideo/cameraControlVideo.html

<div>
    <div class="row">
        <div class="col-md-6">
            <h6>
                <vc:i18n name="我的摄像头" namespace="cameraControlVideo"></vc:i18n>
            </h6>
        </div>
        <div class="col-md-6 text-right">
            <button type="button" class="btn-white btn btn-sm margin-right-sm" v-on:click="_changeCameras()">
                <vc:i18n name="摄像头" namespace="cameraControlVideo"></vc:i18n>
            </button>
            <div class="btn-group" role="group" aria-label="Basic example">
                <button type="button" class="btn btn-light btn-sm"
                    v-bind:class="{'btn-primary': cameraControlVideoInfo.cameraCount == 4}"
                    v-on:click="_changeCount(4)">
                    <vc:i18n name="四路" namespace="cameraControlVideo"></vc:i18n>
                </button>
                <button type="button" class="btn btn-light btn-sm"
                    v-bind:class="{'btn-primary': cameraControlVideoInfo.cameraCount == 6}"
                    v-on:click="_changeCount(6)">
                        <vc:i18n name="六路" namespace="cameraControlVideo"></vc:i18n>
                </button>
            </div>
        </div>
    </div>
    <div class="row margin-top">
        <!-- 2*2-->
        <div class="col-md-6" v-if="cameraControlVideoInfo.cameraCount == 4"
            v-for="(item,index) in cameraControlVideoInfo.machines">
            <div class="form-group">
                <video :id="item.machineId" controls autoplay="autoplay" muted width="100%" height="400px"
                    style="background-color: #000;"></video>
                <span><span>
                        <vc:i18n name="摄像头" namespace="cameraControlVideo"></vc:i18n>
                    </span>：{{item.machineName}}</span>
            </div>
        </div>
        <div class="col-md-4" v-if="cameraControlVideoInfo.cameraCount == 6"
            v-for="(item,index) in cameraControlVideoInfo.machines">
            <div class="form-group">
                <video :id="item.machineId" controls autoplay="autoplay" muted width="100%" height="400px"
                    style="background-color: #000;"></video>
                <span><span>
                        <vc:i18n name="摄像头" namespace="cameraControlVideo"></vc:i18n>
                    </span>：{{item.machineName}}</span>
            </div>
        </div>

    </div>
    <vc:create path="property/chooseCamera"></vc:create>
</div>