在vue页面当中使用原生视频显示

最新推荐文章于 2024-06-26 15:02:31 发布

wxj_web

最新推荐文章于 2024-06-26 15:02:31 发布

阅读量3.8k

点赞数

分类专栏： Vue 视频文章标签： vue HTML 视频

本文链接：https://blog.csdn.net/wxj_ios/article/details/79040527

版权

这篇博客展示了如何在Vue应用中使用HTML的video标签来显示原生视频。通过在模板中定义video元素，并设置视频源为data属性，实现了在页面上添加一个可控的视频播放器。

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

<template>
  <div class="whole">
    <video :src="videoOptions" controls='controls'>
      您的浏览器不支持 video 标签。
    </video>
  </div>

</template>

<script>

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

wxj_web

关注关注

0
点赞
踩
2

收藏

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

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

Vue中视频组件vue-video-player

qq_43777572的博客

08-02

8259

Vue中视频组件vue-video-player

vue 组件全局封装_封装一个vue视频播放器组件

weixin_42474537的博客

01-01

1037

现在，在网页上播放视频已经越来越流行，但是网上的资料鱼龙混杂，很难找到自己想要的，今天小编就自己的亲身开发体验，手把手从零开始---封装一个vue视频播放器组件。❝作为一个老道的前端搬砖师，怎么可能会一心闭门造车呢？还是先去网上找找轮子吧❞经过在网上不断的查阅之后，我最终选择了video.js这个轮子，作为我的播放器。好，现在轮子找好了，乍一看，天，好像有点丑。不着急，我再来把它美化美化...

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

vue-video-player的使用

Wehter的博客

05-11

930

vue-video-player的使用用到了一个视频播放插件，直接上代码了 //css <video-player ref="videoplayer" :playsinline="true" @play="onPlayerPlay($event)" :options="playerOptions" > </video-player> // script

ffmpeg纯前端实现对视频的操作 - fluent-ffmpeg踩坑、ffmpeg-statci踩坑、视频合并、图片转视频

最新发布

qkdgz的博客

06-26

1528

ffmpeg纯前端实现对视频的操作，fluent-ffmpeg踩坑、视频合并、图片转视频、ffmpeg命令行。ffmpeg-static + electron打包报错。ffmpeg跨平台路径，视频合并路径

vue 使用video加载视频进行展示，视频循环自动播放

Aa12364567的博客

12-30

3046

vue 使用video加载视频进行展示，视频循环自动播放loop autoplay。

vue实现视频流播放

Think_and_work的博客

08-23

6964

vue实现视频流播放~

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

KiMiWaWonderful的博客

02-10

8874

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

vue使用微信扫一扫功能的实现代码

11-20

在Vue项目中集成微信扫一扫功能，需要遵循一系列步骤来实现。以下是对整个过程的详细解释： **第一步：安装依赖库** 首先，你需要安装`weixin-js-sdk`和`jquery`库，这两个库在实现微信扫一扫功能中是必不可少的。...

Vue + 原生JS + 原生CSS3 实现视频时间点在时间轴上的动态可视化

wantingtr的博客

02-26

6180

文章目录需求实现效果模拟后台数据实现方法数据结构htmlJS功能实现初始化点击切换关键词实现时间点可视化遇到的问题v-show 用布尔类型的数组绑定无法监听生命周期造成的对象undefined问题总结需求根据关键字在视频中的出现时间，在模拟的视频时间轴中显示对应的位置用户点击，选择不同的关键字，显示对应关键词时间点击进度条中的关键词时间点，视频对应跳转到该时间播放实现效果完整源...

本项目基本就是斗鱼手机移动端的复刻，采用纯Vue开发的移动页面，后端对接官方api

06-16

Vue.js自身提供了良好的响应式支持，但还需要开发者对CSS进行合理的布局设计，确保在各种屏幕尺寸下都能正常显示。此外，移动端的网络环境可能不如桌面端稳定，因此需要优化图片、视频资源的加载策略，减少对用户...

Vue实现视频播放

前端学习分享

09-30

1593

vue项目实现视频播放

vue 展示视屏

jia13145201999的博客

03-18

1735

vue 展示视屏

FFmpeg——在Vue项目中使用FFmpeg（安装、配置、使用、SharedArrayBuffer、跨域隔离、避坑...）

HuoZhiyan 的博客

12-17

1万+

本文介绍了FFmpeg在Vue项目中从0到1的使用，从安装 => 配置 => 简单使用 => 认识SharedArrayBuffer和跨域隔离 => 避坑...

vue 项目中播放视频展示插件vue-video-player

hello world的博客

01-29

885

安装插件 npm install vue-video-player -S 在 main.js 入口文件导入 import VideoPlayer from 'vue-video-player'　　　 import 'video.js/dist/video-js.css' import "vue-video-player/src/custom-theme.css"; Vue.use(VideoPlayer) 在单文件组件中使用 import "video.js/dist/video-js..

视频播放：vue使用vue-video-player插件

provence_20的博客

12-09

2117

1.安装插件 npm install vue-video-player -S 2.使用（我的是弹窗） <template> <el-dialog :title="'视频播放'" :close-on-click-modal="false" :visible.sync="visible"> <el-form:...

h5+vue video使用