更新记录

0.0.1（2024-08-01） 下载此版本

-

平台兼容性

hls-video-player - 使用 html5 的原生 video 标签，实现在APP中的播放 hls 的视频流的组件

能干什么？

• 能够支持 iOS 和 Android 两端的视频流播放，但是...仅支持 hls 格式！
• 提供进度反馈、全屏播放、倍速播放、快进快退等自定义方法和拓展函数。
• 不同于 uniapp 中的 video 原生组件，难以覆盖，该 video 可以被 div 随意覆盖层级。
• 如果需求仅仅是视频播放，而不是视频流播放，可以使用市场中另一个插件：dom-video-player

iOS 为什么只支持 hls，而不支持 flv？

• Apple 公司对 flash 的强烈抵制以及推行自己定的视频协议，flv.js中调用的 MediaSource在Safari on iOS中不受支持，而在 Android 系统的浏览器内核中是支持的。

为什么 iOS 就能直接播放 hls 格式视频？

• 因为 HLS(HTTP Live Streaming) 是由 Apple 公司提出的，所以 Safari 天然的能够不借助其它插件直接进行播放 hls 视频流；而 Android 系统的浏览器内核则必须借助于 hls.js进行播放。

为什么要用这个视频播放器，uniapp 提供的 video 组件不香吗？

• 香！uniapp 中的 video 原生组件，提供了丰富的参数配置和事件回调，能不香吗？但局限性也是有的，无法满足我司的产品需求 和 设计同学的 UI 需求（打不过）：
  • uniapp 的视频播放器是原生组件，层级高于普通前端组件，难以被业务组件和定制化需求所遮挡、覆盖。
  • 使用 cover-view 遮挡的话又有一些 css 样式限制和显隐的兼容问题，plus.nativeObj.view的开发难度高。
  • uniapp 的视频播放器就难以自定义样式了，播放按钮、进度条、遮挡层级等无法实现 UI 的设计需求。
  • video 在 scroll-view 和 swiper 中的使用问题，原生组件使用限制
  • uniapp 的视频播放器在 iOS 端与uni.getBackgroundAudioManager背景音频的事件冲突，事件调用存在互相干扰。

使用说明

props 传值:

src: '' // 视频地址
autoplay: false // 是否自动播放
controls: false // 是否显示控制栏
muted: false // 是否静音
playbackRate: 1 // 倍速播放
objectFit: 'contain' // 视频尺寸与video区域的适应模式
poster: '' // 视频封面

向父组件传递的事件:

play: () => {} // 播放事件
pause: () => {} // 暂停事件
timeupdate: (e) => {} // 视频播放进度事件
ratechange: (e) => {} // 倍速播放事件
fullscreenchange: (e) => {} // 全屏播放事件
hlsManifestParsed: (e) => {} // hls 视频解析事件
hlsError: (e) => {} // hls 视频错误事件

组件methods方法:

play() // 播放
pause() // 暂停
remove(time) // 移除视频
fullScreen() // 进入全屏
toSeek(time) // 跳转到指定时间点(s)

组件html代码片段:

<HlsVideoPlayer
ref="hlsVideoPlayer"
src="https://devstreaming-cdn.apple.com/videos/streaming/examples/img_bipbop_adv_example_fmp4/master.m3u8"
autoplay
controls
muted
/>

父组件调用子组件方法:

/* vue2 */
let hlsVideoPlayer = this.$refs.hlsVideoPlayer
// 播放视频
hlsVideoPlayer.play()
// 暂停视频
hlsVideoPlayer.pause()

/* vue3 */
const hlsVideoPlayer = ref(null)
hlsVideoPlayer.play()
hlsVideoPlayer.pause()

使用异常 Q&A

• 视频黑屏，播放不出来？

  • 检查项目是否已安装了 hls.js 的 npm 包
  • 检查视频流格式是否为hls哦，是不支持flv的，文档上方有说明原因。

• 为什么没有视频的总时长信息？

  • 因为是视频推流，所以是拿不到视频总长度的，但是会通过timeupdate事件回调当前的播放进度。

• 为什么组件内部报错？

  • 检查是否已安装 hls.js 的 npm 包
  • 检查 renderjs的<script>标签中的import hls from 'xxxxx'引入路径是否正确
  • import hls的引入需要使用相对路径，而不能是绝对路径，参考我组件中的的写法../../xxx/hls.js