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

lsfzzf
发布于 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>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
.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;
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.

 

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

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];
    }
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
分类
标签
已于2021-1-27 15:42:48修改
3
收藏 1
回复
举报
3
1
1
1条回复
按时间正序
/
按时间倒序
wx5d679dc9bfe17
wx5d679dc9bfe17

cpath内网穿透一直用不了

回复
2023-11-3 09:36:35
回复
    相关推荐