HarmonyOS应用开发实战-媒体组件video 原创

鸿蒙时代
发布于 2021-11-15 10:15
浏览
0收藏
  1. video。视频播放组件。
    说明:需要在config.json配置,“configChanges”: [“orientation”]

除支持通用属性外,还支持如下属性:
HarmonyOS应用开发实战-媒体组件video-鸿蒙开发者社区

除支持通用样式外,还支持如下样式:
HarmonyOS应用开发实战-媒体组件video-鸿蒙开发者社区

类型说明:

HarmonyOS应用开发实战-媒体组件video-鸿蒙开发者社区

除支持通用事件外,还支持如下事件:
HarmonyOS应用开发实战-媒体组件video-鸿蒙开发者社区

除支持通用方法外,还支持如下方法:
HarmonyOS应用开发实战-媒体组件video-鸿蒙开发者社区

  1. 案例
    HarmonyOS应用开发实战-媒体组件video-鸿蒙开发者社区
    <!–index.hml–>
    <div class=“container”>
    <div class=“video_div”>
    <video class=“video”
    id=‘videoId’
    src=‘/common/活动1.mp4’ //此处为资源路径。资源请自行准备!
    muted=‘false’
    autoplay=‘false’
    controls=“true”
    onprepared=‘preparedCallback’
    onstart=‘startCallback’
    onpause=‘pauseCallback’
    onfinish=‘finishCallback’
    onerror=‘errorCallback’
    onseeking=‘seekingCallback’
    onseeked=‘seekedCallback’
    ontimeupdate=‘timeupdateCallback’
    onlongpress=‘change_fullscreenchange’
    onclick=“change_start_pause”
    loop=‘true’
    starttime = ‘3’></video>
    </div>
    </div>

/index.css/
.container {
flex-direction: column;
justify-content: center;
align-items: center;
}
.video_div{
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 300px;
background-color: #ccc;
}
.video{
object-fit:fill;
width:560px;
height: 224px;
margin-top: 0;
border: 1px solid #333;
}

//index.js
export default {
data: {
event:‘’,
seekingtime:‘’,
timeupdatetime:‘’,
seekedtime:‘’,
isStart: true,
isfullscreenchange: false,
duration: ‘’,
},
guan(){router.push({uri:‘pages/index/index’ })},
huo(){router.push({uri:‘pages/activity/activity’})},
bu(){router.push({uri:‘pages/shop/shop’})},
preparedCallback:function(e){ this.event = ‘视频连接成功’; this.duration = e.duration;},
startCallback:function(){ this.event = ‘视频开始播放’;},
pauseCallback:function(){ this.event = ‘视频暂停播放’; },
finishCallback:function(){ this.event = ‘视频播放结束’;},
errorCallback:function(){ this.event = ‘视频播放错误’;},
seekingCallback:function(e){ this.seekingtime = e.currenttime; },
timeupdateCallback:function(e){ this.timeupdatetime = e.currenttime;},
change_start_pause: function() {
if(this.isStart) {
this.$element(‘videoId’).pause();
this.isStart = false;
} else {
this.$element(‘videoId’).start();
this.isStart = true;
}
},
change_fullscreenchange: function() {//全屏
if(!this.isfullscreenchange) {
this.$element(‘videoId’).requestFullscreen({ screenOrientation : ‘default’ });
this.isfullscreenchange = true;
} else {
this.$element(‘videoId’).exitFullscreen();
this.isfullscreenchange = false;
}
}
}

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
HarmonyOS应用开发实战-媒体组件video.docx 307.29K 31次下载
1
收藏
回复
举报
回复
    相关推荐