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

1. video。视频播放组件。
   说明：需要在config.json配置，“configChanges”: [“orientation”]

除支持通用属性外，还支持如下属性：

除支持通用样式外，还支持如下样式：

类型说明：

除支持通用事件外，还支持如下事件：

除支持通用方法外，还支持如下方法：

2. 案例
   
   <!–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;
}
}
}