返回发烧友论坛
发 帖  

[文章]HarmonyOS应用开发实战-媒体组件video

李洋水蛟龙
2021-11-15 10:26:21
阅读量0
0
2
  • video。视频播放组件。
    说明：需要在config.json配置，“configChanges”: [“orientation”]
除支持通用属性外，还支持如下属性：
除支持通用样式外，还支持如下样式：
类型说明：
除支持通用事件外，还支持如下事件：
除支持通用方法外，还支持如下方法：
  • 案例

  1. <span style="font-weight: normal;"><font size="4"><!--index.hml-->
  2. <div class="container">
  3.             <div class="video_div">
  4.                 <video class="video"
  5.                        id='videoId'
  6.                        src='/common/活动1.mp4'    //此处为资源路径。资源请自行准备！
  7.                        muted='false'
  8.                        autoplay='false'
  9.                        controls="true"
  10.                        onprepared='preparedCallback'
  11.                        onstart='startCallback'
  12.                        onpause='pauseCallback'
  13.                        onfinish='finishCallback'
  14.                        onerror='errorCallback'
  15.                        onseeking='seekingCallback'
  16.                        onseeked='seekedCallback'
  17.                        ontimeupdate='timeupdateCallback'
  18.                        onlongpress='change_fullscreenchange'
  19.                        onclick="change_start_pause"
  20.                        loop='true'
  21.                        starttime = '3'></video>
  22.                     </div>
  23. </div>

  25. /*index.css*/
  26. .container {
  27.     flex-direction: column;
  28.     justify-content: center;
  29.     align-items: center;
  30. }
  31. .video_div{
  32.     flex-direction: column;
  33.     align-items: center;
  34.     justify-content: center;
  35.     width: 100%;
  36.     height: 300px;
  37.     background-color: #ccc;
  38. }
  39. .video{
  40.     object-fit:fill;
  41.     width:560px;
  42.     height: 224px;
  43.     margin-top: 0;
  44.     border: 1px solid #333;
  45. }



  49. //index.js
  50. export default {
  51.     data: {
  52.         event:'',
  53.         seekingtime:'',
  54.         timeupdatetime:'',
  55.         seekedtime:'',
  56.         isStart: true,
  57.         isfullscreenchange: false,
  58.         duration: '',
  59.     },
  60.     guan(){router.push({uri:'pages/index/index' })},
  61.     huo(){router.push({uri:'pages/activity/activity'})},
  62.     bu(){router.push({uri:'pages/shop/shop'})},
  63.     preparedCallback:function(e){ this.event = '视频连接成功'; this.duration = e.duration;},
  64.     startCallback:function(){ this.event = '视频开始播放';},
  65.     pauseCallback:function(){ this.event = '视频暂停播放'; },
  66.     finishCallback:function(){ this.event = '视频播放结束';},
  67.     errorCallback:function(){ this.event = '视频播放错误';},
  68.     seekingCallback:function(e){ this.seekingtime = e.currenttime; },
  69.     timeupdateCallback:function(e){ this.timeupdatetime = e.currenttime;},
  70.     change_start_pause: function() {
  71.         if(this.isStart) {
  72.             this.$element('videoId').pause();
  73.             this.isStart = false;
  74.         } else {
  75.             this.$element('videoId').start();
  76.             this.isStart = true;
  77.         }
  78.     },
  79.     change_fullscreenchange: function() {//全屏
  80.         if(!this.isfullscreenchange) {
  81.             this.$element('videoId').requestFullscreen({ screenOrientation : 'default' });
  82.             this.isfullscreenchange = true;
  83.         } else {
  84.             this.$element('videoId').exitFullscreen();
  85.             this.isfullscreenchange = false;
  86.         }
  87.     }
  88. }</font></span>
复制代码
附件：
HarmonyOS应用开发实战-媒体组件video.docx
(307.29 KB, 下载次数: 2)

举报

回帖

声明：本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人，不代表电子发烧友网立场。文章及其配图仅供工程师学习之用，如有内容图片侵权或者其他问题，请联系本站作侵删。 侵权投诉
链接复制成功，分享给好友