HarmonyOS 鸿蒙Next视屏/全屏播放

发布于 1周前 作者 songsunli 来自 鸿蒙OS

HarmonyOS 鸿蒙Next视屏/全屏播放

一、介绍
基于鸿蒙Next模拟视频播放，正常播放与全屏播放
二、场景需求
大多数视频播放器都会有一个全屏按钮，通常位于视频播放窗口的右下角。点击该按钮可以进入全屏模式
三、业务步骤
第一步：准备好播放的视屏，点击左下方播放按钮，播放视频
第二部：中间可以暂停或者开始
第三步：可以拖动进度条
第三步：可以点击右下角放大icon，进行全屏播放，或者恢复正常播放
四、效果展示

56d3c4f859009f7dda9835f20b8d25838748d7.png

五：代码展示：

import promptAction from ‘@ohos.promptAction’
import { videoSlider } from “…/view/videoSlider”


@Entry
@Component
struct VideoPlayer {
@State videoSrc: string  = ‘/common/videos/v1.mp4’
@State videoImg: string = ‘/common/videos/img1.png’
@State videoTitle: string  = “视频标题”
@State isSupport: boolean  = false
@State currentProgressRate: number = 1
@State isPlay: boolean = false; //是否播放视频
@State isAmplify: boolean = false; //是否放大
@State progressVal: number = 0; //
@State outSetValueOne: string = “0”; //视频时常
@State startTime: string = “00:00”; //开始时间
@State endTime: number = 0; //结束时间
@State endStringTime: string = “00:00”; //结束时间
@State currentTime: number = 0; //当前时间


private controller: VideoController = new VideoController(); // 视频控制器


//当前页面销毁
onPageHide() {
this.controller.pause();
}


build() {
Column() {


  <span class="hljs-keyword"><span class="hljs-keyword">if</span></span> (<span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.isAmplify){
    <span class="hljs-comment"><span class="hljs-comment">//视频内容-全屏</span></span>
    Column() {
      Video({
        src: <span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.videoSrc,
        previewUri: <span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.videoImg,
        currentProgressRate:<span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.currentProgressRate,
        controller: <span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.controller
      })
        .width(<span class="hljs-string"><span class="hljs-string">"100%"</span></span>)
        .height(<span class="hljs-string"><span class="hljs-string">"92%"</span></span>)
        .controls(<span class="hljs-literal"><span class="hljs-literal">false</span></span>)
        .autoPlay(<span class="hljs-literal"><span class="hljs-literal">false</span></span>)
        .objectFit(ImageFit.Contain)
        .loop(<span class="hljs-literal"><span class="hljs-literal">false</span></span>)
          <span class="hljs-comment"><span class="hljs-comment">//播放时触发该事件。</span></span>
        .onStart(() =&gt; {})
          <span class="hljs-comment"><span class="hljs-comment">//暂停时触发该事件。</span></span>
        .onPause(() =&gt; {})
          <span class="hljs-comment"><span class="hljs-comment">//播放结束时触发该事件。</span></span>
        .onFinish(() =&gt; {
          <span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.isPlay = <span class="hljs-literal"><span class="hljs-literal">false</span></span>
        })
          <span class="hljs-comment"><span class="hljs-comment">//播放失败时触发该事件。</span></span>
        .onError(() =&gt; {
          promptAction.showToast({message:<span class="hljs-string"><span class="hljs-string">"播放失败"</span></span>})
        })
          <span class="hljs-comment"><span class="hljs-comment">//视频准备完成时触发该事件。duration：当前视频的时长，单位为秒(s)。</span></span>
        .onPrepared((e) =&gt; {
          <span class="hljs-keyword"><span class="hljs-keyword">let</span></span> d_ = e.duration
          <span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.endTime = d_;
          <span class="hljs-keyword"><span class="hljs-keyword">let</span></span> min: number = <span class="hljs-built_in"><span class="hljs-built_in">Number</span></span>.parseInt((d_ / <span class="hljs-number"><span class="hljs-number">60</span></span>).toString());
          <span class="hljs-keyword"><span class="hljs-keyword">let</span></span> second: number = d_ % <span class="hljs-number"><span class="hljs-number">60</span></span>;
          <span class="hljs-keyword"><span class="hljs-keyword">let</span></span> m = min &lt; <span class="hljs-number"><span class="hljs-number">10</span></span> ? `${<span class="hljs-string"><span class="hljs-string">'0'</span></span>}${min}` : min;
          <span class="hljs-keyword"><span class="hljs-keyword">let</span></span> s = second &lt; <span class="hljs-number"><span class="hljs-number">10</span></span> ? `${<span class="hljs-string"><span class="hljs-string">'0'</span></span>}${second}` : second;
          <span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.endStringTime = `${m}${<span class="hljs-string"><span class="hljs-string">':'</span></span>}${s}`;
        })
          <span class="hljs-comment"><span class="hljs-comment">//操作进度条过程时上报时间信息。time：当前视频播放的进度，单位为s。</span></span>
        .onSeeking((e) =&gt; {})
          <span class="hljs-comment"><span class="hljs-comment">//操作进度条完成后，上报播放时间信息。time：当前视频播放的进度，单位为s。</span></span>
        .onSeeked((e) =&gt; {})
          <span class="hljs-comment"><span class="hljs-comment">//播放进度变化时触发该事件。time：当前视频播放的进度，单位为s。</span></span>
        .onUpdate((e) =&gt; {
          <span class="hljs-keyword"><span class="hljs-keyword">if</span></span> (e) {
            <span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.currentTime = e.time;
            <span class="hljs-keyword"><span class="hljs-keyword">let</span></span> second: number = <span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.currentTime % <span class="hljs-number"><span class="hljs-number">60</span></span>;
            <span class="hljs-keyword"><span class="hljs-keyword">let</span></span> min: number = <span class="hljs-built_in"><span class="hljs-built_in">Number</span></span>.parseInt((<span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.currentTime / <span class="hljs-number"><span class="hljs-number">60</span></span>).toString());
            <span class="hljs-keyword"><span class="hljs-keyword">let</span></span> start_m = min &lt; <span class="hljs-number"><span class="hljs-number">10</span></span> ? `${<span class="hljs-string"><span class="hljs-string">'0'</span></span>}${min}` : min;
            <span class="hljs-keyword"><span class="hljs-keyword">let</span></span> start_s = second &lt; <span class="hljs-number"><span class="hljs-number">10</span></span> ? `${<span class="hljs-string"><span class="hljs-string">'0'</span></span>}${second}` : second;
            <span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.startTime = `${start_m}${<span class="hljs-string"><span class="hljs-string">':'</span></span>}${start_s}`;
          }
        })
          <span class="hljs-comment"><span class="hljs-comment">//在全屏播放与非全屏播放状态之间切换时触发该事件。fullscreen：返回值为true表示进入全屏播放状态，为false则表示非全屏播放</span></span>
        .onFullscreenChange(() =&gt; {})
      Blank()
      videoSlider({
        startTime:$startTime,
        endTime:$endTime,
        endStringTime:$endStringTime,
        currentTime: $currentTime,
        isPlay:$isPlay,
        isAmplify:$isAmplify,
        isSupport:$isSupport,
        controller: <span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.controller,
      })
      Blank()
    }.width(<span class="hljs-string"><span class="hljs-string">"100%"</span></span>)
    .height(<span class="hljs-string"><span class="hljs-string">"100%"</span></span>)
    .backgroundColor(<span class="hljs-number"><span class="hljs-number">0x999999</span></span>)
  }<span class="hljs-keyword"><span class="hljs-keyword">else</span></span> {
    <span class="hljs-comment"><span class="hljs-comment">//视屏内容</span></span>
    Column() {
      Video({
        src: <span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.videoSrc,
        previewUri: <span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.videoImg,
        currentProgressRate:<span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.currentProgressRate,
        controller: <span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.controller
      })
        .height(<span class="hljs-number"><span class="hljs-number">383</span></span>)
        .controls(<span class="hljs-literal"><span class="hljs-literal">false</span></span>)
        .autoPlay(<span class="hljs-literal"><span class="hljs-literal">false</span></span>)
        .objectFit(ImageFit.Contain)
        .loop(<span class="hljs-literal"><span class="hljs-literal">false</span></span>)
          <span class="hljs-comment"><span class="hljs-comment">//播放时触发该事件。</span></span>
        .onStart(() =&gt; {})
          <span class="hljs-comment"><span class="hljs-comment">//暂停时触发该事件。</span></span>
        .onPause(() =&gt; {})
          <span class="hljs-comment"><span class="hljs-comment">//播放结束时触发该事件。</span></span>
        .onFinish(() =&gt; {
          <span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.isPlay = <span class="hljs-literal"><span class="hljs-literal">false</span></span>
        })
          <span class="hljs-comment"><span class="hljs-comment">//播放失败时触发该事件。</span></span>
        .onError(() =&gt; {
          promptAction.showToast({message:<span class="hljs-string"><span class="hljs-string">"播放失败"</span></span>})
        })
          <span class="hljs-comment"><span class="hljs-comment">//视频准备完成时触发该事件。duration：当前视频的时长，单位为秒(s)。</span></span>
        .onPrepared((e) =&gt; {
          <span class="hljs-keyword"><span class="hljs-keyword">let</span></span> d_ = e.duration
          <span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.endTime = d_;
          <span class="hljs-keyword"><span class="hljs-keyword">let</span></span> min: number = <span class="hljs-built_in"><span class="hljs-built_in">Number</span></span>.parseInt((d_ / <span class="hljs-number"><span class="hljs-number">60</span></span>).toString());
          <span class="hljs-keyword"><span class="hljs-keyword">let</span></span> second: number = d_ % <span class="hljs-number"><span class="hljs-number">60</span></span>;
          <span class="hljs-keyword"><span class="hljs-keyword">let</span></span> m = min &lt; <span class="hljs-number"><span class="hljs-number">10</span></span> ? `${<span class="hljs-string"><span class="hljs-string">'0'</span></span>}${min}` : min;
          <span class="hljs-keyword"><span class="hljs-keyword">let</span></span> s = second &lt; <span class="hljs-number"><span class="hljs-number">10</span></span> ? `${<span class="hljs-string"><span class="hljs-string">'0'</span></span>}${second}` : second;
          <span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.endStringTime = `${m}${<span class="hljs-string"><span class="hljs-string">':'</span></span>}${s}`;
        })
          <span class="hljs-comment"><span class="hljs-comment">//操作进度条过程时上报时间信息。time：当前视频播放的进度，单位为s。</span></span>
        .onSeeking((e) =&gt; { })
          <span class="hljs-comment"><span class="hljs-comment">//操作进度条完成后，上报播放时间信息。time：当前视频播放的进度，单位为s。</span></span>
        .onSeeked((e) =&gt; {})
          <span class="hljs-comment"><span class="hljs-comment">//播放进度变化时触发该事件。time：当前视频播放的进度，单位为s。</span></span>
        .onUpdate((e) =&gt; {
          <span class="hljs-keyword"><span class="hljs-keyword">if</span></span> (e) {
            <span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.currentTime = e.time;
            <span class="hljs-keyword"><span class="hljs-keyword">let</span></span> second: number = <span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.currentTime % <span class="hljs-number"><span class="hljs-number">60</span></span>;
            <span class="hljs-keyword"><span class="hljs-keyword">let</span></span> min: number = <span class="hljs-built_in"><span class="hljs-built_in">Number</span></span>.parseInt((<span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.currentTime / <span class="hljs-number"><span class="hljs-number">60</span></span>).toString());
            <span class="hljs-keyword"><span class="hljs-keyword">let</span></span> start_m = min &lt; <span class="hljs-number"><span class="hljs-number">10</span></span> ? `${<span class="hljs-string"><span class="hljs-string">'0'</span></span>}${min}` : min;
            <span class="hljs-keyword"><span class="hljs-keyword">let</span></span> start_s = second &lt; <span class="hljs-number"><span class="hljs-number">10</span></span> ? `${<span class="hljs-string"><span class="hljs-string">'0'</span></span>}${second}` : second;
            <span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.startTime = `${start_m}${<span class="hljs-string"><span class="hljs-string">':'</span></span>}${start_s}`;
          }
        })
          <span class="hljs-comment"><span class="hljs-comment">//在全屏播放与非全屏播放状态之间切换时触发该事件。fullscreen：返回值为true表示进入全屏播放状态，为false则表示非全屏播放</span></span>
        .onFullscreenChange(() =&gt; {})

      <span class="hljs-comment"><span class="hljs-comment">//进度条</span></span>
      videoSlider({
        startTime:$startTime,
        endTime:$endTime,
        endStringTime:$endStringTime,
        currentTime: $currentTime,
        isPlay:$isPlay,
        isAmplify:$isAmplify,
        isSupport:$isSupport,
        controller: <span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.controller,
      })

    }.width(<span class="hljs-string"><span class="hljs-string">"100%"</span></span>)
    .height(<span class="hljs-string"><span class="hljs-string">"100%"</span></span>)
    .justifyContent(FlexAlign.Center)
  }
}
.width(<span class="hljs-string"><span class="hljs-string">'100%'</span></span>)
.height(<span class="hljs-string"><span class="hljs-string">'100%'</span></span>)
}
}<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>


关于HarmonyOS 鸿蒙Next视屏/全屏播放的问题，您也可以访问：https://www.itying.com/category-93-b0.html 联系官网客服。


更多关于HarmonyOS 鸿蒙Next视屏/全屏播放的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

回到顶部
AI 助手
你好，我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验！