【ArkUI】Video怎么实现加载网络视频

​

 参考资料

video

 

代码实现

config.json配置

config.json添加网络权限，代码如下

"reqPermissions": [
      {"name": "ohos.permission.INTERNET"}
    ],

  "deviceConfig": {
    "default": {
      "network": {
        "cleartextTraffic": true
      }
    }
  },

config.json对应的"abilities"中设置"configChanges"属性为"orientation"

"abilities": [
 {
 "configChanges": ["orientation"],
 ...
 }
]

hml代码

<!-- xxx.hml -->
<div class="container">
    <video id='videoId' src='https://mos-vod-drcn.dbankcdn.cn/P_VT/video_injection/4C1343D65/v3/D6A49051973663675032273537/MP4Mix_H.264_1920x1080_6000_HEAAC1_PVC_NoCut.mp4' muted='false' autoplay='false'
           controls='true'                                         style="object-fit:fill; width:80%; height:400px;"
          >
    </video>
</div>

css代码

/* xxx.css */
.container {
    justify-content: center;
    align-items: center;
}

js代码

// xxx.js
export default {
    data: {
        event:'',
        seekingtime:'',
        timeupdatetime:'',
        seekedtime:'',
        isStart: true,
        duration: '',
    },
    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;
        }
    },
}

运行效果

​

​欲了解更多更全技术文章，欢迎访问https://developer.huawei.com/consumer/cn/forum/?ha_source=zzh