如何在 ionic 3 中显示视频列表

Posted 2023-03-05

【中文标题】如何在 ionic 3 中显示视频列表

【英文标题】：How to display a list of videos in ionic 3

【发布时间】：2018-03-18 21:19:47

【问题描述】：

如何使用 ionic 显示来自我的服务器的视频列表。视频标签似乎不适用于离子。使用时，视频似乎不显示。 这就是我使用视频标签的方式：

<video>
   <source="theurlofthevideo.mp4" type="type/mp4">
</video>

似乎是什么问题。不适用于浏览器和安卓系统。

【参考方案1】：

如下图所示。

注意：这只是一个示例。将其转换为您的用例。

<ion-content overflow-scroll="true">
  <video controls="controls" preload="metadata" autoplay="autoplay" webkit-playsinline="webkit-playsinline" class="videoPlayer">
   <source src="./assets/videos/Part_1.mp4" type="video/mp4" />
  </video>
</ion-content>

工作样本：codepen

并且我也想推荐使用native video Player plugin。

一个 Cordova 插件，可让您立即播放视频 全屏模式。

ionic cordova plugin add https://github.com/moust/cordova-plugin-videoplayer.git 
npm install --save @ionic-native/video-player

【讨论】：

该插件与 html5 视频标签相比有什么好处？我需要做类似的事情。谢谢！

只适用于android ios平台呢

你可以使用Videogularvideogular.github.io/videogular2@KhurshidAnsari

感谢其他问题。可能是版本。我正在使用离子 3

你可以使用6.1.1github.com/videogular/videogular2/releases/tag/v6.1.1@KhurshidAnsari