本篇文章给大家谈谈Vue商城项目视频，以及vue框架做的项目购物商城对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、vue项目中为什么打不开webm格式的视频
• 2、Vue示例之使用视频播放
• 3、vue项目video视频播放多种实现方式

vue项目中为什么打不开webm格式的视频

1、原因是vue项目页面上本身的样式影响到了视频的样式。

2、换一个页面，或者将视频独立放在最外面的标签，样式就不会有问题。

Vue示例之使用视频播放

最近接手新项目，从后端变前端，有一点前端基础但是对于Vue一无所知。

一切从零开始，此次需求是项目中有一个视频播放功能。以下做一个简单示例共大家参考。

使用的插件是 vue-vedio-player

输入如下命令

在main.js里面导入并引用

视频路径写法：

1.视频上传到服务器写法（在JS中找到src更换为你的视频路径）

2.本地视频路径写法

在assets目录下新建video文件夹导入视频testVideo即可

设置视频封面: poster

图片路径在assets目录下

vue项目video视频播放多种实现方式

一、vue-video-player

安装

npm i vue-video-player

引入

index.vue

二、原生video标签播放文件,除了样式丑点没啥毛病

index.vue

三、video.js插件

1、先安装video.js...

index.vue

关于Vue商城项目视频和vue框架做的项目购物商城的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。