鸿蒙js开发4 鸿蒙实现多媒体视频的播放 原创

效果图：

页面视图及样式：

<div class="pagediv">
    <div class="videodiv">
        <video class="v1" src="{{path}}" autoplay="true" controls="true">
        </video>
    </div>
    <!--使用<tabs>组件定义滚动菜单栏-->
    <tabs class="tabsdiv" vertical="false" onchange="changevideo" >
        <tab-bar class="tab-bar">
            <block for="{{video}}">
                <text>第{{$idx+1}}集</text>
            </block>
        </tab-bar>
        <!--此处tab-content中必须有内容，否则在点击播放其他video时会没有任何反映-->
        <tab-content>
            <block for="{{video}}">
                <div class="v1">
<!--                    <text>第{{$idx+1}}集剧情介绍</text>-->
                </div>
            </block>
        </tab-content>
    </tabs>

<!--    <div class="tiaoshi">-->
<!--        <text>{{menuIndex}}</text>-->
<!--    </div>-->

</div>

.pagediv{
    width: 100%;
    height: 1200px;
    display: flex;
    flex-direction: column;
}
.videodiv{
    width: 100%;
    height: 30%;
    border-bottom: 1px solid skyblue;
}
.v1{
    width: 100%;
    height: 100%;
}
.tabsdiv{
    width: 100%;
    height: 10%;
    border-bottom: 1px solid red;
}

.tiaoshi{
    width: 100%;
    height: 20%;
    border: 1px solid black;
}

逻辑层的数据定义及代码实现如下：

export default {
    data: {
        cpath:"http://ls.free.idcfengye.com",
        path:"",
        video:["/video/v1.mp4",
               "/video/v2.mp4",
               "/video/v3.mp4",
               "/video/v4.mp4",
               "/video/v5.mp4",
               "/video/v6.mp4",
               "/video/v7.mp4",
               "/video/v8.mp4"],
        menuIndex:0
    },
    onInit(){
        this.path = this.cpath+this.video[0];
    },
    //选择要播放的video时触发此方法
    changevideo(event){
        //this.menuIndex = event.index;
        this.path = this.cpath+this.video[event.index];
    }
}