做信息图网站,网站建设 学习 长沙,wordpress 服务器配置,自己做网站能宣传自己的产品吗在混合 App 中#xff0c;移动端使用 标签播放视频经常踩坑#xff0c;尤其是格式兼容、跨域限制、WebView 差异等问题。 本文介绍一个通用的 Cordova 视频播放组件#xff1a;优先 HTML5 播放#xff0c;播放失败自动提示用户使用系统播放器#xff0c;并支持原生插件兜底…在混合 App 中移动端使用 标签播放视频经常踩坑尤其是格式兼容、跨域限制、WebView 差异等问题。 本文介绍一个通用的 Cordova 视频播放组件优先 HTML5 播放播放失败自动提示用户使用系统播放器并支持原生插件兜底播放。 ✅ 功能亮点
✅ 支持 MP4 / M3U8HLS.js✅ 播放失败提示「点击使用系统播放器」✅ 原生播放器兜底cordova-plugin-streaming-media✅ 可配置横/竖屏、全屏、缓存下载✅ 使用简单移动端稳定运行 安装依赖
cordova plugin add cordova-plugin-streaming-media
npm install hls.js组件源码CordovaVideo.vue
templatediv classvideo-wrapper v-showvisible clickonMaskClickvideov-if!useNativePlayerrefvideoclassvideo-player:srcvideoSrccontrolsplaysinlinewebkit-playsinline:posterposterclick.stoperroronVideoErrorwaiting$emit(buffering)playing$emit(playing)/videodiv v-iffallbackPrompt classfallback-tip click.stopp播放失败点击使用系统播放器/pbutton clickuseSystemPlayer用系统播放器播放/button/divbutton classclose-btn click.stoponMaskClick aria-label关闭视频×/buttondiv v-ifdownloading classdownload-progress click.stopp缓存中 {{ Math.round(progress * 100) }}%/p/div/div
/templatescript
import Hls from hls.jsexport 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()}}
}
/scriptstyle 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 原生播放自动退出 总结
移动端视频播放兼容性较差需考虑降级处理使用原生播放器插件做兜底是当前 Cordova 应用中可靠的解决方案推荐使用 cordova-plugin-streaming-media轻量稳定
如果你觉得有帮助欢迎点赞收藏支持
