使用vue-video-player保存观看记录

已于 2024-03-18 14:30:34 修改
阅读量1.1k 收藏 2
点赞数
分类专栏： vue 文章标签： vue
于 2020-12-28 17:48:12 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Ninewu/article/details/111869954
版权

使用vue的video-player保存观看记录

  1. 安装 vue-video-player
    npm install vue-video-player -S;

  2. 引入vue-video-player
    在这里插入图片描述
    （我是在页面引入的没有在全局引入）

  3. 在html中
    在这里插入图片描述

  4. 在data中设置常用参数 playerOptions
    在这里插入图片描述

  5. 在methods中
    在这里插入图片描述
    我是在暂停和播放结束的时候请求后台接口把数据给后台传过去的

如果想让视频自动播放则设置 playerOptions参数中的 autoplay
在这里插入图片描述

奥利奥的路飞
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-video-player视频播放器使用配置详解
01-18
本文实例为大家分享了vue-video-player视频播放器的使用配置，供大家参考，具体内容如下 1、安装 npm install vue-video-player -save 2、在main.js中添加 import VueVideoPlayer from 'vue-video-player' // 视频...
vue3 web在线音乐项目——蔚蓝音乐 开发记录
最新发布
weixin_52878347的博客
08-16 861
想基于vue3技术独立开发一个前端项目，以前做过一个基于vue2和uniapp仿网易云音乐的微信小程序，于是想再做个web版的。前端菜鸡一枚，仅个人记录，项目存在一些布局问题和逻辑bug。只做了我觉得比较核心有趣的几个页面和功能，还有挺多东西可以完善的，等有时间可以慢慢把功能补齐。进度条和歌词滚动还有鼠标拖拽进度条和歌词进度没有实现，歌词滚动还存在一点问题，如果是歌放到一半再打开歌词界面，会从歌词第一句快速滚动到目标位置，不会直接就是正在唱的那句。
vue web视频播放的一个记录
Tiny2017的博客
03-16 271
1.播放器选择 1.dplayer 2.liveplayer（此处选择这个）liveplayer 2.安装 npm install --save-dev video.js npm install @liveqing/liveplayer npm install flv.js 3.liveplayer在vue中使用 3.1 复制依赖文件 安装 copy-webpack-plugin 插件, npm install [email protected], 编辑你的 webpack.config.
vue3+aplayer+歌曲信息获取
weixin_46105091的博客
04-24 2141
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、Aplayer二、使用步骤1.vue组件2.歌曲信息的问题 前言 提示：这里可以添加本文要记录的大概内容： 最近自己写博客,想找个现成的音乐播放器,由于用的vue3,逛了一圈下来,没有一个比较方便的实现方式,最后不得不再aplayer的基础上自己完善一下 提示：以下是本篇文章正文内容，下面案例可供参考 一、Aplayer Aplayer官网地址:https://aplayer.js.org/#/zh-Hans/ vue.
vue实现用户获取浏览记录功能
Hoodps的专栏
09-25 6242
在路由配置文件设置一个属性用来判断当前路由是否需要记录，如要记录当前路由设置为ture memoryRouter: false //是否记忆当前路由为常用工具 { path: '/helloWorld', name: 'HelloWorld', component: HelloWorld, meta: { ...
vue 实现video视频播放进度保存
m0_51065454的博客
08-03 4092
最近在做一个项目，要求前端发送video的播放记录，后台保存对应的时间和状态，用户下次进入页面，根据对应的信息加载video。最开始请教了一下前辈，使用了定时器的方法，每隔一段时间向后台发送对应的观看进度，然后暂停、切换等状态也发送对应的请求，但是，最后发现，如果用户拉动进度条然后立即推出，可能导致无法记录，最后采用了自己的一个思路，暂时实现了效果，可能有许多地方存在问题。 想法如下，三个用户操作记录对应的信息 1：用户切换视频，记录上一个视频观看进度 2：用户关闭浏览器，记录视频观看...
浏览器缓存视频进度，vue-video-player
liudongwang的博客
04-20 1777
整个vue组件放进来了，基本上是用id+视频地址，判断id是否存在，如果有则调用缓存拿到上次播放市场playTime，然后从这个时长加载 主要方法关键字play (id,url) ，open() ，close (e) ， //当前播放位置发生变化时触发。 onPlayerTimeupdate(player) //将侦听器绑定到组件的就绪状态。与事件监听器的不同之处在于，如果ready事件已经发生，它将立即触发该函数。。 playerReadied(player) { ...
Vue保存视频播放记录，使用vue-video-player
shitianxiang的博客
02-06 6571
Vue保存视频播放记录 前言：最近由于项目需要做一个视频播放器，还需要有记录视频播放时间的功能，在网上查阅了一些资料，找到一些方法，但大部分是用监听器每隔几秒往后台发送一个请求，这样太浪费后台资源。下面是我的思路和做法。 1.首先我挑选的是和vue搭配的vue-video-player做视频播放。下面是关于它的一部分代码。 html部分 <video-player class="vide...
vue-video-play 记载视频观看时间和还原视频进度
a158086780的专栏
10-12 4956
vue-video-play 记载视频观看时间和还原视频进度vue-video-play 还原视频进度vue-video-play 记载视频观看时间vue-video-play 全屏也要将弹出窗DOM置顶 vue-video-play 还原视频进度 参考文档 从后台获取的播放视频参数如下: 当前播放到哪里了的时间videoLearnedTime 视频时长videoTotalTime 视频地址 用户ID 视频ID 因为本人的需求是同一页面，要切换加载不同的视频 ，发现ready这个函数不能准确的加载。故在
html5 video安排位置,js H5 video如何在关闭页面后记住播放位置，下次进入直接从该位置开始播放...
weixin_36081299的博客
06-04 943
代码如下，localStorage里的currentTime可以拿到，但是点击播放还是从头开始啊varvideo=document.getElementById('myvideo');var currentTime = localStorage.getItem("currentTime");console.log(currentTime);video.addEventListener("lo...
Unity 视频播放器，基于VideoPlayer，实现滑动进度条，显示视频时长，全屏显示，音量调节
qq_33161296的博客
11-14 7501
unity播放视频的方式有很多种，但即轻量又好用的，还是unity自带的VideoPlayer，但没有视频基础操作的UI组件，本篇带大家对视频的播放，以及UI组件的实现Unity常用视频格式：mov、mpg、mpeg、mp4、avi、asf1、Hierarchy中新建VideoPlayer组件2、Hierarchy中创建RAWImage3、在Assets中新建RenderTexture纹理4、设置好视频的分辨率5、将建好的纹理拖到第2步中新建的RawImage上。
vue-video-player.zip
09-09
此demo是一个用video.js封装的播放组件—vue-video-player。用于前端播放本地或链接地址视频。
vue使用video插件vue-video-player的示例
10-14
主要介绍了vue使用video插件vue-video-player的示例，帮助大家更好的理解和使用vue插件，感兴趣的朋友可以了解下
vue视频播放插件vue-video-player的具体使用方法
12-13
安装 npm install vue-video-player --save 引入 可以全局引入插件，也可以在需要用到该插件的组件内单独引入（二选一） 【1】全局引用， 在main.js里面...【2】组件内引用import { videoPlayer } from ‘vue-video-pl
详解vue-video-player使用心得（兼容m3u8）
10-16
主要介绍了详解vue-video-player使用心得（兼容m3u8），文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
[VUE]页面视频播放使用vue-video-player记录
凡尘炼心的博客
09-26 961
1.在项目根目录main.js 引入vue-video-player import VideoPlayer from 'vue-video-player' import 'vue-video-player/src/custom-theme.css' import 'video.js/dist/video-js.css' 2.在页面中直接引入 <el-form-item label="视频"> <div class='demo'> <vi
使用Vue快速展示历史记录
星银色飞行船的博客
08-08 2765
前言 最近使用vue做了一个历史记录界面，动态赋值的简便性令我陶醉。读完本文您将了解v-for循环，v-text赋值和{{}}赋值，v-if判断和:class=“{a：b}”动态绑定 编程工具：VisualStudio2017 目录 接口编写固定数据 Js中写请求 页面元素的动态赋值 实现效果图 1.接口编写固定数据 后端代码写在了flip.ashx一般处理程序中。数据全部写成固定的，在后台拼接好，等待前台的请求调用。 try { if (context.Request.Para
Vue-Video-Player 实现视频播放进度保存
热门推荐
Echo
09-18 1万+
最近再尝试Vue播放视频，结果没想到有人让我保存进度，有点懵逼，不过觉得还是可以挑战一下的。 首先先用Vue项目去集成Vue-Video-Player（https://github.com/surmon-china/vue-video-player），具体的集成步骤不再赘述。 集成完之后先做出来一般基础的框架，实现视频的播放功能。 代码如下： <video-player clas...
Vue 存储浏览历史
PrimaryColor
07-28 676
//存放浏览历史 let name = JSON.parse(sessionStorage.getItem("userInfo")).nickname; let arr = []; arr = JSON.parse(localStorage.getItem("userBrowse")) ? JSON.parse(localStorage.getItem("userBrowse")) : []; //判断是否重复
vue3使用vue-video-player
08-06
b'vue-video-player'使用教程： 1. 安装vue-video-player 在项目中使用npm或yarn进行安装。 npm install vue-video-player -S 或者 yarn add vue-video-player 2. 引入vue-video-player 在需要使用的组件中引入vue-video-player。 import VueVideoPlayer from 'vue-video-player' import 'video.js/dist/video-js.css' import 'vue-video-player/src/custom-theme.css' Vue.use(VueVideoPlayer) 3. 在模板中使用vue-video-player 在需要播放视频的组件中使用<video-player>标签来引入播放器。 <video-player :options="playerOptions"></video-player> 其中，playerOptions是播放器的配置项，可以自定义配置。 4. 自定义配置 可以通过修改playerOptions来自定义配置。常用的配置项包括autoplay自动播放、controls控制条、sources视频源等。 5. 在vue-video-player中使用插件 vue-video-player支持插件，可以通过插件来扩展其功能，例如全屏、弹幕等。只需要在Vue.use()中添加相应的插件即可。 6. 其他 vue-video-player还支持事件监听、弹幕管理等功能，详细的使用可以参照官方文档。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值