ionic 插件实现video标签播放本地视频

最新推荐文章于 2025-06-13 15:16:40 发布

原创最新推荐文章于 2025-06-13 15:16:40 发布 · 3.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#video #本地视频播放

前端专栏收录该内容

5 篇文章

订阅专栏

本文探讨了在web应用中播放本地视频的限制及解决方法，介绍了如何通过搭建应用内webserver，利用cordova插件如cordova-plugin-webserver和cordova-plugin-ionic-webview，将本地视频转换为可被video标签识别的http地址。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

src属性是来配置视频的地址的。

在w3school介绍中，它可以有两种值，一种，其它网站上的视频地址。比如"http://www.example.com/song.ogg"。明显就是服务器上的地址。一种，应用内的地址，比如"/asset/13.mp4"。

但仅仅这样，在遇到播放手机本地视频的需求时就不行。如果直接给本地视频的绝对路径。比如这样"file:///www/root/asste/13.mp4"。它会报错，不可播放的视频类型（其实不会报错，你需要加错误监听来打印出错误代码）。即非应用内的视频，video标签不支持。

方法：如果想将下载的视频播放，我们需要搭建应用内的webserver，来使video标签的src属性变成这样"localhost://1080:www/root/asste/13.mp4"。在ionic中有插件实现了该功能，ionic3中的webserver和ionic4中的ioninc webview。具体插件为：cordova-plugin-webserver和cordova-plugin-ionic-webview。到github上看一下，就发现他们都是使用了GCDWebServer（ios）来实现应用内的web服务。

具体到使用，我测试时视频下载后传递完整的绝对路径，并没有自动的修改成服务器的http协议。当我去掉"file://"这7个字符才自动加上了http协议，变成"localhost://1080:www/root/asste/13.mp4"，src可接受的值。

如果不是ionic 项目，也有其它的实现。cordova 插件。