当前位置：首页 > news >正文

Cordova + Vue 移动端视频播放组件（支持 HLS + 原生播放器兜底）

news 来源：原创 2025/6/20 8:05:46

在混合 App 中，移动端使用标签播放视频经常踩坑，尤其是格式兼容、跨域限制、WebView 差异等问题。
本文介绍一个通用的 Cordova 视频播放组件：优先 HTML5 播放，播放失败自动提示用户使用系统播放器，并支持原生插件兜底播放。
✅ 功能亮点

✅ 支持 MP4 / M3U8（HLS.js）
✅ 播放失败提示「点击使用系统播放器」
✅ 原生播放器兜底（cordova-plugin-streaming-media）
✅ 可配置横/竖屏、全屏、缓存下载
✅ 使用简单，移动端稳定运行

🧩 安装依赖

cordova plugin add cordova-plugin-streaming-media
npm install hls.js

🧱 组件源码（CordovaVideo.vue）

<template><div class="video-wrapper" v-show="visible" @click="onMaskClick"><videov-if="!useNativePlayer"ref="video"class="video-player":src="videoSrc"controlsplaysinlinewebkit-playsinline:poster="poster"@click.stop@error="onVideoError"@waiting="$emit('buffering')"@playing="$emit('playing')"></video><div v-if="fallbackPrompt" class="fallback-tip" @click.stop><p>播放失败，点击使用系统播放器</p><button @click="useSystemPlayer">用系统播放器播放</button></div><button class="close-btn" @click.stop="onMaskClick" aria-label="关闭视频">×</button><div v-if="downloading" class="download-progress" @click.stop><p>缓存中 {{ Math.round(progress * 100) }}%</p></div></div>
</template><script>
import Hls from 'hls.js'export default {name: 'CordovaVideo',props: {src: { type: String, required: true },cache: { type: Boolean, default: false },poster: String,landscape: { type: Boolean, default: true }},data () {return {visible: false,localPath: null,downloading: false,progress: 0,hls: null,useNativePlayer: false,fallbackPrompt: false}},computed: {videoSrc () {if (this.isM3U8) return ''return this.localPath || this.src},isM3U8 () {return this.src.endsWith('.m3u8')}},mounted () { this.prepare() },methods: {cleanupHtml5 () {if (this.hls) { this.hls.destroy(); this.hls = null }const v = this.$refs.videoif (v) { v.pause(); v.removeAttribute('src'); v.load() }},play () {if (this.visible) returnthis.visible = truethis.useNativePlayer = falsethis.fallbackPrompt = falsethis.$nextTick(() => {if (this.isM3U8 && Hls.isSupported()) {this.initHls()} else {this.tryHtml5Play()}})},tryHtml5Play () {const v = this.$refs.videoif (!v) return this.showFallback()const onSuccess = () => {v.removeEventListener('error', onError)clearTimeout(timer)}const onError = () => this.showFallback()v.addEventListener('error', onError, { once: true })v.addEventListener('playing', onSuccess, { once: true })v.play().catch(() => this.showFallback())const timer = setTimeout(() => this.showFallback(), 5000)},showFallback () {this.fallbackPrompt = true},useSystemPlayer () {this.fallbackPrompt = falsethis.playNative()},initHls () {this.hls?.destroy()this.hls = new Hls()this.hls.attachMedia(this.$refs.video)this.hls.loadSource(this.src)this.hls.on(Hls.Events.ERROR, () => this.showFallback())},onVideoError () {this.showFallback()},playNative () {const streaming = window.plugins?.streamingMediaif (!streaming) {this.visible = falsereturn}this.cleanupHtml5()this.useNativePlayer = truethis.visible = falsestreaming.playVideo(this.src, {orientation: this.landscape ? 'landscape' : 'portrait',shouldAutoClose: true,controls: true,initFullscreen: true})},prepare () {},download () {}},watch: {src () {this.localPath = nullthis.prepare()}}
}
</script><style scoped>
.video-wrapper {position: fixed; inset: 0;background: #000;z-index: 9999;display: flex; align-items: center; justify-content: center;
}
.video-player {width: 100%; max-height: 100%;
}
.fallback-tip {position: absolute; inset: 0;background: rgba(0,0,0,0.6);color: #fff; font-size: 16px;display: flex; flex-direction: column;align-items: center; justify-content: center;
}
.fallback-tip button {padding: 6px 12px;background: #409eff; color: #fff;border: none; border-radius: 4px;
}
.close-btn {position: absolute; top: 12px; right: 12px;width: 32px; height: 32px;background: rgba(255,255,255,0.15);color: white; font-size: 20px;border: none; border-radius: 50%;cursor: pointer;
}
</style>

🔍 插件对比：Cordova 常用视频播放方案分析

插件名	是否全屏	是否支持横竖屏	控件控制	兼容性	是否可自定义关闭	播放格式支持	综合推荐
`<video>` 标签	否（受限）	是	是	易出错（Android 上格式限制多）	是	MP4（部分编码）、HLS（需搭配 hls.js）	✅ 前置尝试
`cordova-plugin-streaming-media`	✅ 是	✅ 是	✅ 支持	稳定	❌ 无关闭按钮（需播放结束自动退出）	MP4 / M3U8 / AVI / 多格式（依赖系统播放器）	⭐ 推荐兜底方案
`cordova-plugin-video-player`	✅ 是	❌ 仅竖屏	❌ 控制弱	支持好	❌ 无退出按钮	MP4 主流支持	🚫 不推荐
第三方播放器 WebView 方案（如腾讯视频 iframe）	❓ 取决于 Web 容器	❌ 受限	❓ 不统一	风险高，易失效	❌	限平台	❌ 仅作补充

✅ 建议组合方案

播放顺序	使用方式
✅ 首选 HTML5 `<video>` 播放（支持 HLS 的话配合 `hls.js`）
⚠️ 监听 `play()` 失败或 `error` 回调中主动 `fallback`
🔁 兜底切换为 `cordova-plugin-streaming-media` 原生播放，自动退出