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

发布于 2021-1-22 00:30
浏览
1收藏

效果图:

鸿蒙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];
    }
}

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
标签
已于2021-1-27 15:42:48修改
3
收藏 1
回复
举报
回复
添加资源
添加资源将有机会获得更多曝光,你也可以直接关联已上传资源 去关联
    相关推荐