在vue里面使用原生的视频播放组件

最新推荐文章于 2024-07-31 10:09:32 发布

镜中月下水中花

最新推荐文章于 2024-07-31 10:09:32 发布

阅读量6.9k

点赞数 1

分类专栏： vue 文章标签： vue video

本文链接：https://blog.csdn.net/a1550290560/article/details/93469273

版权

vue 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

 <el-form-item label="视频" prop="video" style="width: 35%">
          <div class="whole">
            <video :src="video" controls="controls"></video>
          </div>
</el-form-item>

效果图
在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

镜中月下水中花

关注关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

vue 使用原生组件上传图片的实例

10-14

本文将详细介绍如何在Vue项目中使用原生HTML5的`<input type="file">`组件来上传图片，并通过Ajax与后端进行交云。在需求描述部分，提到了两种情况：在一个页面上传一张图片和在一个页面上传多张图片。这对应了...

vue使用原生video属性大全&个人踩坑记录

renjie123321的博客

06-29

7822

src ：视频的属性 poster：视频封面，没有播放时显示的图片 preload：预加载 autoplay：自动播放 loop：循环播放 controls：浏览器自带的控制条 width：视频宽度 height：视频高度 //audio和video都可以通过JS获取对象,JS通过id获取video和audio的对象获取video对象 Media = document.getElementById(“media”);HTMLVideoElement和HTMLAudioElement 均继承自HTMLMed

1 条评论您还未登录，请先登录后发表或查看评论

vue播放视频使用原生video标签基本功能（不含样式）

progrmmmm的博客

08-04

3492

功能都在注释中解释了。把模拟获取视频url网络请求的getVideos换成你自己的请求或者写成静态的就可以了。如果是本地文件建议使用相对定位。

video播放视频组件，复制即可用免安装，支持自定义参数

最新发布

海贼王某人的博客

07-31

325

video播放视频组件，复制即可用免安装，支持自定义参数

Vue实现视频播放（一）：使用原生方法写一个视频播放组件

KiMiWaWonderful的博客

02-10

8875

看的是黑马程序员的教程，记录下来当做笔记。 HTML：使用了video标签该标签的事件： ontimeupdate：在视频进行播放的时候持续触发，我们可以监听这个事件，并在这个事件中获取视频的当前播放时间； oncanplay：在视频信息加载完毕之后触发总时长可以通过oncanplay获取，但是当前播放时间需要在ontimeupdate事件中持续更新，当视频信息加载完毕之后，会自动的触发on...

vue使用原生video标签播放视频

资浅程序媛，个人公众/头条/百家号：郑州小闲人，关注权限已向你开放

07-22

3891

如果想实现自动播放，需要加autoplay属性，但是加了之后也可能出现无法自动播放的问题，还需要在加muted属性

video标签设计vue视频播放器组件

zz1399的博客

01-26

4709

关闭弹窗后视频依旧在后台播放的问题处理和原生video标签设计视频播放器

Vue如何实现监听组件原生事件

10-15

在Vue框架中，监听组件原生事件是一种常见的需求，特别是在处理复杂交互时。Vue提供了多种方式来监听这些事件，包括使用`.native`修饰符。本篇文章将深入探讨如何在Vue中实现监听组件的原生事件，以及如何在实际案例...

vue原生js轮播图组件.rar

11-29

在给定的"vue原生js轮播图组件.rar"压缩包中，包含了一个使用原生JavaScript实现的Vue轮播图组件。这个组件允许开发者在Vue项目中轻松集成轮播图功能，而无需依赖外部的轮播图插件。轮播图是网页设计中常见的元素...

Vue结合原生js实现自定义组件自动生成示例

10-20

Vue.js虽然鼓励使用声明式的数据绑定，但在处理动态生成的组件时，可能需要结合原生JavaScript。此外，对于更复杂的场景，可能需要考虑使用Vue的`render`函数或`Vue.extend`来创建组件实例，这将提供更大的灵活性和...

Vue异步组件使用详解

08-30

在实际的Vue单文件组件(SFC)中，我们可以这样使用异步组件： ```html import Vue from 'vue' const searchSearch = Vue.component('searchSearch', function (resolve) { require(['./service-search.vue'], ...

vue 手写视频的control组件

qq_45689385的博客

04-14

549

效果功能介绍：根据点击title跳转到当前对应的时间节点播放，本文项目用的是vue+antd开发如果不是antd 有些样式请自行修改，功能还是好的话不多说，直接上代码，根据prop传入标题，和地址即可，注意头部用的滚动用的是swiper，请导入后使用，本文是直接在index.html中映入的 <template> <div id="videoBox" class="videoBox"> <!--视频分段播放组件 created by shu.

vue实现自定义video的controller

Zmikoo学习之路

09-02

2310

html: <div ref='videoContainer' :class="['myvideo-box',fullScreenState ? 'fullscreen' : '']" @mousemove='controlerShowControl(true)' @mouseout='controlerShowControl(false)' @click='controlerShowControl(true)'> <video ref='vide

videojs在vue中的使用以及他的所有属性（包括controls）

weixin_45048360的博客

03-22

4619

参考博文链接 1 初始化 Video.js初始化有两种方式。 1.1 标签方式一种是在标签里面加上class="video-js"和data-setup='{}'属性。注意，两者缺一不可。刚开始的时候我觉得后面的值为空对象{}，不放也行，导致播放器加载不出来，后来加上来就可以了。 1.2 JS方式格式：var player = videojs('my-player'); 这样有个要求，就是不能配置data-setup，并且需要传入的id。 2 播放按钮居中 video.js它自带有四种主题，有.

video组件的使用

qq_34176087的博客

11-22

554

3. objectFit属性用于设置视频的显示模式，属性值包括Contain、Cover、Auto、Fill、ScaleDown、None 6种模式，默认情况下使用ImageFit.Cover。2. Video组件拥有五个私有属性，分别是：muted、autoPlay、controls、objectFit、loop。1. 将Video组件的controls属性设置为false时，不会显示控制视频播放的控制栏。2. 下述Video支持的视频文件格式不正确的是？

vue 视频播放插件vue-video-player自定义样式、自动播放设置、设置一开始全屏播放视频、监听全屏事件