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

最新推荐文章于 2024-09-14 07:41:53 发布

wxj_web

最新推荐文章于 2024-09-14 07:41:53 发布

阅读量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视频播放器组件

weixin_42474537的博客

01-01

1058

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

Vue中视频组件vue-video-player

qq_43777572的博客

08-02

8302

Vue中视频组件vue-video-player

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

Vue-JSMpeg 使用教程

最新发布

gitblog_00826的博客

09-14

575

Vue-JSMpeg 使用教程 vue-jsmpeg 项目地址: https://gitcode.com/gh_mirrors/vu/vue-jsmpeg 1. 项目介绍 ...

vue-video-player的使用

Wehter的博客

05-11

964

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

Vue预览图片和视频的几种方式

一步一个脚印，踏实努力，向着目标前进

07-08

6700

以上是几种常见的方法来实现视频的预览。你可以根据具体的需求和项目来选择合适的方法来预览视频。你可以根据具体的需求和项目来选择合适的方式来显示图片。是Vue组件中的一个数据属性，它保存了图片的路径。是Vue组件中的一个数据属性，它保存了视频的路径。是Vue组件中的一个数据属性，它保存了视频的路径。在上面的代码中，我们使用CSS的。在上面的代码中，我们引入了。在上面的代码中，我们引入了。在上面的代码中，我们使用。在上面的代码中，我们使用。在上面的代码中，我们使用。在上面的代码中，我们使用。

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

renjie123321的博客

06-29

8072

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

vue中实现视频播放

m0_47944994的博客

07-31

1875

main.js中引入并且定义全局变量。

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

KiMiWaWonderful的博客

02-10

8917

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

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

11-20

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

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

a1550290560的博客

06-24

6996

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

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

wantingtr的博客

02-26

6228

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

vue 显示视频

weixin_43817724的博客

01-11

3871

vue-video-player的github地址戳安装 cnpm install vue-video-player --save 引用 import{videoPlayer}from"vue-video-player"; import"video.js/dist/video-js.css"; <template> <divclass="inde...

视频 video 标签居中写法

weixin_44484873的博客

03-25

1万+

视频标签居中 overflow: hidden; display: flex; align-items: center; justify-content: center; UI布局库职业生涯前端存储库

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

progrmmmm的博客

08-04

3538

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

Vue 原始（传统）或特别的视频组件具体实现方法

Muxiu

05-29

1419

简单点的理解，就是没有点击就会暂停播放视频，还有忽略了音频，鼠标点击视频也不会停止，完全自循环播放，后面就是对这个视频进行灵活的前端排版了。

vue 展示视屏

jia13145201999的博客

03-18

1754

vue 展示视屏

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

06-16

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

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

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

07-22

4029

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

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