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

最新推荐文章于 2024-07-31 10:09:32 发布
最新推荐文章于 2024-07-31 10:09:32 发布
阅读量6.9k 收藏 3
点赞数 1
分类专栏： vue 文章标签： vue video
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a1550290560/article/details/93469273
版权 
 <el-form-item label="视频" prop="video" style="width: 35%">
          <div class="whole">
            <video :src="video" controls="controls"></video>
          </div>
</el-form-item>

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

镜中月下水中花
关注
专栏目录
Vue3视频播放器组件Vue3-video-play入门教程
猿小白的博客
03-11 1万+
Vue3-video-play适用于 Vue3 的 hls.js 播放器组件 | 并且支持MP4/WebM/Ogg格式。1、支持快捷键操作2、支持倍速播放设置3、支持镜像画面设置4、支持关灯模式设置5、支持画中画模式播放6、支持全屏/网页全屏播放7、支持从固定时间开始播放8、支持移动端，移动端会自动调用自带视频播放器9、支持hls视频流播放，支持直播10、hls播放支持清晰度切换。
Vue实现视频播放（一）：使用原生方法写一个视频播放组件
KiMiWaWonderful的博客
02-10 8874
看的是黑马程序员的教程，记录下来当做笔记。 HTML： 使用了video标签 该标签的事件： ontimeupdate：在视频进行播放的时候持续触发，我们可以监听这个事件，并在这个事件中获取视频的当前播放时间； oncanplay：在视频信息加载完毕之后触发 总时长可以通过oncanplay获取，但是当前播放时间需要在ontimeupdate事件中持续更新，当视频信息加载完毕之后，会自动的触发on...
原生自己定义的视频播放器
09-24
原生自己定义的视频播放器 基于VideoView 自定义控制面板 手势识别器 进度调节 亮度调节 声音大小调节 其实第三方Vitamio实现效果更好 不过能自己写的东西为何不自己写
vue使用原生video标签播放视频
资浅程序媛，个人公众/头条/百家号：郑州小闲人，关注权限已向你开放
07-22 3877
如果想实现自动播放，需要加autoplay属性，但是加了之后也可能出现无法自动播放的问题，还需要在加muted属性
video播放视频组件，复制即可用免安装，支持自定义参数
最新发布
海贼王某人的博客
07-31 319
video播放视频组件，复制即可用免安装，支持自定义参数
vue使用原生video属性大全&个人踩坑记录
renjie123321的博客
06-29 7798
src ：视频的属性 poster：视频封面，没有播放时显示的图片 preload：预加载 autoplay：自动播放 loop：循环播放 controls：浏览器自带的控制条 width：视频宽度 height：视频高度 //audio和video都可以通过JS获取对象,JS通过id获取video和audio的对象 获取video对象 Media = document.getElementById(“media”);HTMLVideoElement和HTMLAudioElement 均继承自HTMLMed
组件用.vue还是.js_VUE.JS的视频播放器组件
cuk5239的博客
07-20 179
组件用.vue还是.js Vue视频播放器 (Vue-Video-Player) VIDEO PLAYER COMPONENT FOR VUE.JS(1.X ~ 2.X) VUE.JS(1.X〜2.X)的视频播放器组件 base video.js + videojs-resolution-switcher + videojs-contrib-hls + videojs-youtube + vi...
Vue如何实现监听组件原生事件
10-15
在Vue框架中，监听组件原生事件是一种常见的需求，特别是在处理复杂交互时。Vue提供了多种方式来监听这些事件，包括使用`.native`修饰符。本篇文章将深入探讨如何在Vue中实现监听组件的原生事件，以及如何在实际案例...
vue 使用原生组件上传图片的实例
10-14
本文将详细介绍如何在Vue项目中使用原生HTML5的`<input type="file">`组件来上传图片，并通过Ajax与后端进行交云。 在需求描述部分，提到了两种情况：在一个页面上传一张图片和在一个页面上传多张图片。这对应了...
vue.js实现仿原生ios时间选择组件实例代码
10-20
从所提供的文件信息中，我们可以提炼出以下知识点： 1. **Vue.js的使用**: Vue.js是一个用于构建用户界面的...此外，还可以学习到如何使用Vue-cli和CSS3来为组件添加样式和动画效果，从而达到仿iOS原生组件的效果。
Vue结合原生js实现自定义组件自动生成示例
10-20
Vue.js虽然鼓励使用声明式的数据绑定，但在处理动态生成的组件时，可能需要结合原生JavaScript。此外，对于更复杂的场景，可能需要考虑使用Vue的`render`函数或`Vue.extend`来创建组件实例，这将提供更大的灵活性和...
推荐一款强大且灵活的 Vue 视频播放器组件：Vue-Core-Video-Player
gitblog_00050的博客
04-18 1125
推荐一款强大且灵活的 Vue 视频播放器组件：Vue-Core-Video-Player 项目地址:https://gitcode.com/core-player/vue-core-video-player 在现代Web开发中，视频元素已经成为不可或缺的一部分。为了帮助开发者在Vue.js应用中轻松实现高质量的视频播放功能，我们推荐一个开源项目——Vue-Core-Video-Player。 项目...
vue 视频播放
shykevin的博客
01-17 8976
一、概述 基于 Vue 的一个轻量级视频播放组件，适配 PC 和移动端。 官方链接：https://webweifeng.github.io/vue-mini-player/ 特色 1.轻量级HTML5播放器，精美UI控件，简单易上手 2.提供以npm的形式安装提供全局组件 3.多格式视频配置，移动端+PC 通用模式 多类型视频支持 自定义海报 多平台兼容 静音开关 播放时间进度 ...
vue使用原生videojs 播放m3u8格式的视频——播放m3u8格式视频（一）
qq_37831545的博客
09-22 4881
vue使用原生videojs 播放m3u8格式的视频——播放m3u8格式视频（一）播放器在拿到XXX.m3u8视频地址（索引文件）后，会去请求拿到分片数据资源，也就是一大串的.ts文件列表，然后依次去请求这些.ts文件（当然这些是播放器内部自己实现的）
Vue 原始（传统）或特别的视频组件具体实现方法
Muxiu
05-29 1370
简单点的理解，就是没有点击就会暂停播放视频，还有忽略了音频，鼠标点击视频也不会停止，完全自循环播放，后面就是对这个视频进行灵活的前端排版了。
【vue】vue+easyPlayer 实现宫格布局及视频播放
wan小小冰的博客
09-21 3624
vue+easyPlayer 实现四分屏、九分屏、十六分屏视频播放
vue 视频播放插件vue-video-player自定义样式、自动播放设置、设置一开始全屏播放视频、监听全屏事件
热门推荐
DarlingYL的博客
04-29 1万+
vue 视频播放插件vue-video-player自定义样式、自动播放设置、设置一开始全屏播放视频、监听全屏事件
vue播放视频使用原生video标签基本功能（不含样式）
progrmmmm的博客
08-04 3489
功能都在注释中解释了。把模拟获取视频url网络请求的getVideos换成你自己的请求或者写成静态的就可以了。如果是本地文件建议使用相对定位。
vue实现自定义video的controller
Zmikoo学习之路
09-02 2307
html: <div ref='videoContainer' :class="['myvideo-box',fullScreenState ? 'fullscreen' : '']" @mousemove='controlerShowControl(true)' @mouseout='controlerShowControl(false)' @click='controlerShowControl(true)'> <video ref='vide
video标签设计vue视频播放器组件
zz1399的博客
01-26 4706
关闭弹窗后视频依旧在后台播放的问题处理和原生video标签设计视频播放器
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值