vue 展示视屏

不知名的洋洋

已于 2022-07-20 19:34:25 修改

阅读量1.7k

点赞数

文章标签： vue.js 前端 javascript

于 2022-03-18 16:01:34 首次发布

本文链接：https://blog.csdn.net/jia13145201999/article/details/123577061

版权

这篇博客介绍了如何使用video.js库在HTML页面中添加视频播放功能。通过`npm install --save-dev video.js`安装video.js，然后在HTML中设置video标签和对应的source标签，并添加样式。博客提供了详细的代码示例，包括视频播放前的图片、视频路径以及播放器的样式定制。

摘要由CSDN通过智能技术生成

1.下载 video.js

npm install --save-dev video.js   下载video.js

npm init -y

2. html

<video
                  id="my-player"
                  class="video-js"
                  controls
                  preload="auto"
                  poster="视屏展示前的图片"
                  data-setup="{}"
              >
                <source
                    :src="视屏的路径"
                    type="video/mp4"
                >
                <p class="vjs-no-js">
                 
                  <a
                      :href="视屏的路径"
                      target="_blank"
                  >
                  
                  </a>
                </p>
              </video>

样式：