uni-app Html5 Video 实现方案

发布于 1周前 作者 phonegap100 来自 Uni-App

uni-app Html5 Video 实现方案 前言: 最近项目中需要用到html5 视频播放功能,于是稍微研究了解了下,遇到了很多坑,特此记录下.

一、Html5 Video

参考来源: http://www.xuanfengge.com/html5-video-play.html （这篇博文确实帮助很大）

1.1、目的

将Html5 Video功能应用到实际项目中,针对不同的平台和环境,进行个性化处理。 基本只考虑webkit浏览器兼容问题

1.2、Html5 Video支持格式

只支持: .mp4后缀(.h264编码格式),和.webm后缀(专用web视频格式),以及.ogg后缀(音频文件) 注意: Html5 Video 可以添加多个source源来进行兼容适配,这样,当第一个源读取出问题时会自动读取下一个源. 但Hybird模式的Android下,有些机型只能读取第一个source来源,所以确保第一个source源是正确的 各大浏览器兼容如图所示:

见图1

1.3、不同平台环境和对应实现方案

说明: 分为两大块,普通浏览器环境和Hybird模式的APP环境

1.3.1、普通浏览器环境

  • 用Html5 Video 自带的播放栏控件
  • 用 Video 视频统一处理方法处理后,点击图片手动隐藏图片,设置视频大小,手动播放视频.
  • 注: 播放效果则由各大浏览器自行实现
  • 手机端浏览器实现的不同效果:
    • QQ浏览器(包括QQ客户端内置的浏览器):播放时会自动进入全屏
    • 华为自带浏览器: 正常小窗口播放

1.3.2、Hybird App环境

说明: 内联播放是指直接在video标签中播放视频,没有必要进入全屏

1.3.2.1、Android内联播放
  • 用Html5 Video 自带的播放栏控件
  • 用 Video 视频统一处理方法处理后,点击图片手动隐藏图片,设置视频大小,手动播放视频.
  • 注意: 必须开启硬件加速,由于有些Android手机 webview是默认关闭硬件加速的,所以必须在创建这个带视频播放的webview时手动添加 硬件加速属性才行
style.hardwareAccelerated = true;
1.3.2.2、iOS内联播放
  • 用Html5 Video 自带的播放栏控件
  • 用 Video 视频统一处理方法处理后,点击图片手动隐藏图片,设置视频大小,手动播放视频.
  • 注意: 由于iOS下默认是全屏播放的,所以需要经过设置才能正常内联播放
  • 第一步: 在项目的manifest里面配置允许webview内联播放
"plus": {  
        "splashscreen": {  
            "autoclose": true,
            "waiting": true
        },  
        "allowsInlineMediaPlayback": true, /*设置ios下允许内联播放*/
        "popGesture": "close"
  • 第二步: 创建video标签时,手动加上内联播放的属性(iOS不支持preload)
<!--让ios支持内联播放,必须添加 webkit-playsinline 标签-->
<video webkit-playsinline id="videoMedia" controls="controls" preload>
1.3.2.3、Android非内联播放
  • 通过NJS使用原生播放器来播放视频,传入的url可以是本地的或网络的地址
  • 用 Video 视频统一处理方法处理后,点击图片之后,图片保持不变(所以没有必要隐藏图片),直接获取视频的资源地址,传给原生播放器播放
  • 注: 这种模式下,性能要比直接html5自带播放器播放高
1.3.2.4、iOS非内联播放
  • 用Html5 Video 自带的播放栏控件(非内联播放需要去除特定内联属性”webkit-playsinline”,这样才能全屏播放)
  • 用 Video 视频统一处理方法处理后,点击图片之后,图片保持不变(所以没有必要隐藏图片),直接调用video.play()播放视频(这时候会用一个全屏播放器来播放视频)

1.3.3、注意要点

如果采用NJS通过Android原生播放器播放视频,目前无法监听到视频的一些自定义事件. 而如果采用Html5 Video自带播放,这些是可以通过脚本控制的. 所以选定方案时需要进行衡量

1.4、Tips

1.4.1、关于Video 视频统一处理的方案

说明: 由于将一个

  • 见图2
  • 显然,体验效果并不好,所以现在的做法是用一张模拟播放的图片来替代
  • 注意:
    • 这里不要用{display: none}或者{width:0;height:0;}的方式，因为这样视频元素会处于未激活的状态，给后续的处理带来麻烦.
    • 这里没有考虑ios<6和一些低版本的Android的兼容性问题了(这些版本里,无法直接通过video.play()来播放),因为项目环境基本上要求Android>4.0 iOS 7.0以上的.
    • 关于点击图片播放视频后,如果是内联播放模式下(或者是普通浏览器),就应该将图片隐藏,然后将视频大小设置为本来的大小(一般为图片大小)；如果是非内联播放模式(全屏模式),就没有必要隐藏图片了,因为iOS下会自动打开一个全屏播放器来播放视频,Android下考虑到Html5 video较卡,所以也会通过NJS使用原生播放器来全屏播放视频.

1.4.2、Android NJS播放视屏的实现代码

说明: 这个是Dcloud论坛中有人分享的

//非内联模式下的plus下的android才用到
var Intent = plus.android.importClass("android.content.Intent");
var Uri = plus.android.importClass("android.net.Uri");
var main = plus.android.runtimeMainActivity();
var intent = new Intent(Intent.ACTION_VIEW);
var uri = Uri.parse(url);
intent.setDataAndType(uri, "video/*");
main.startActivity(intent);

Harmonyos Next教程
1 回复

在uni-app中实现HTML5 Video播放功能，可以利用uni-app提供的<video>组件，同时结合HTML5原生的<video>标签来实现视频播放功能。以下是一个基本的实现方案，包括如何在uni-app中使用这些组件，并处理一些基本的播放控制。

1. 使用uni-app内置的<video>组件

uni-app内置了<video>组件，可以直接在页面中引用，适用于大多数视频播放需求。

<template>
  <view>
    <video
      id="myVideo"
      src="https://www.example.com/path/to/your/video.mp4"
      controls
      autoplay
      loop
      muted
      @play="onPlay"
      @pause="onPause"
      @ended="onEnded"
    ></video>
  </view>
</template>

<script>
export default {
  methods: {
    onPlay() {
      console.log('Video is playing');
    },
    onPause() {
      console.log('Video is paused');
    },
    onEnded() {
      console.log('Video has ended');
    }
  }
}
</script>

<style>
/* 样式可根据需要调整 */
video {
  width: 100%;
  height: auto;
}
</style>

2. 使用HTML5原生的<video>标签

在某些情况下，你可能需要更细粒度的控制，或者需要利用HTML5 <video>标签的一些高级特性。此时，可以直接在<web-view>组件中嵌入HTML页面。

首先，创建一个HTML文件（如video.html），并在其中使用<video>标签：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Video Player</title>
</head>
<body>
  <video
    id="myVideo"
    src="https://www.example.com/path/to/your/video.mp4"
    controls
    autoplay
    loop
    muted
  ></video>
  <script>
    const video = document.getElementById('myVideo');
    video.addEventListener('play', () => {
      console.log('Video is playing');
    });
    video.addEventListener('pause', () => {
      console.log('Video is paused');
    });
    video.addEventListener('ended', () => {
      console.log('Video has ended');
    });
  </script>
</body>
</html>

然后，在uni-app的页面中嵌入这个HTML文件：

<template>
  <view>
    <web-view src="/static/video.html"></web-view>
  </view>
</template>

注意：/static/video.html是相对于项目根目录的路径，请根据实际情况调整。

以上两个方案，可以根据你的具体需求选择使用。对于大多数简单的视频播放需求，推荐使用uni-app内置的<video>组件；对于需要更高级功能的场景，可以考虑使用HTML5原生的<video>标签并结合<web-view>组件。

回到顶部