vue移动端的一款音频插件vue-aplayer

最新推荐文章于 2024-07-04 09:49:12 发布
最新推荐文章于 2024-07-04 09:49:12 发布
阅读量335 收藏
点赞数
分类专栏： vue 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43248623/article/details/120506139
版权
web_blog
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-audio-player 音频播放器
tsqjxy的博客
06-24 5739
Vue 音频播放器组件支持 Vue2 和 Vue3 简单实用 通用性高 支持进度条拖拽 支持 PC 端和移动端 完善的文档和示例第一步 第二部 或者 第三步
vue/cli vue-aplayer播放音频
汤迷的博客
03-24 659
1、中文文档地址： https://github.com/SevenOutman/vue-aplayer/blob/develop/docs/README.zh-CN.md#%E9%9F%B3%E4%B9%90%E4%BF%A1%E6%81%AF 2、安装： npm i vue-aplayer -S npm i hls.js -S // 如果安装vue-aplayer报错，则需要安装 hls.js 依赖 3、引入 import Aplayer from 'vue-apla...
基于vue2的音频播放器插件功能简单但是使用也简单可以自定义样式扩展也容易
08-10
基于vue2的音频播放器插件,功能简单,但是使用也简单,可以自定义样式,扩展也容易
7款超具个性的HTML5播放器
weixin_34247155的博客
12-16 1324
这篇文章我们要分享一些很有个性的HTML5音乐播放器和视频播放器，它们都具有播放器的大部分功能，并以HTML5和JavaScript实现。这些HTML5播放器有着非常漂亮的外观，很多你都无需自己重新定义样式，引用相关JS即可，源代码大家都可以下载。 我们相信随着HTML5技术和浏览器技术的不断发展，我们的网页一定会越来越酷而且实用，基于HTML5的播放器也会越来越多，我们会继续关注HTML5播放...
Vue自定义封装音频播放组件（带拖拽进度条）(改版)
最新发布
m0_45858045的博客
07-04 457
vue 封装音频组件播放器
前端页面添加音乐插件
z1804362542的博客
03-06 6718
Aplayer搭配Metingjs音乐插件的使用 1、Aplayer和MetingJ的介绍 Aplayer官网文档：https://aplayer.js.org/#/ Metingjs官网文档：https://github.com/metowolf/MetingJS Aplayer是一个功能强大的HTML5音乐播放器，Metingjs基于Aplayer插件封装好的插件，开箱即用。 简单使用 <link rel="stylesheet" href="http://cdn.jsdelivr.net
uniapp vue2/vue3音频组件，适配ios/Android/H5
热门推荐
qq_44836834的博客
06-12 2万+
uniapp打包ios，android，h5的音频组件，可拖动进度条，有音频总时长
使用vue-aplayer插件时出现的问题的解决
08-27
使用vue-aplayer插件时出现的问题的解决 在使用vue-aplayer插件时，可能会遇到一些问题，本文将介绍这些问题的解决方法。首先，我们需要安装vue-aplayer插件，可以使用npm install vue-aplayer --save命令来安装。 ...
vue音乐播放器插件vue-aplayer的配置及其使用实例详解
08-30
一、标题：Vue 音乐播放器插件 Vue-APlayer 的配置及其使用实例详解 * 从标题可以看出，本文主要介绍了 Vue 音乐播放器插件 Vue-APlayer 的配置和使用实例的详细解释。 二、描述：本篇文章主要介绍了 Vue 音乐...
vue-video:vue移动端简单自定义控件播放器
05-13
Vue.js 是一款流行的前端JavaScript框架，它以组件化开发、易用性和高性能著称。在移动应用开发中，视频播放是常见的功能需求。"vue-video" 提供了一个针对移动端优化的简单自定义控件播放器解决方案，使得在Vue项目...
vue-aplayer：:shortcake:Vue.js的漂亮HTML5音乐播放器
02-06
这是@moefe/vue-aplayer 2.0的分支。 状态：测试版 大多数计划中的功能都已到位，但可能仍然存在错误。 文献资料 可以在上找到文档 安装 yarn add @moefe/vue-aplayer 用法 import Vue from 'vue' ; import APlayer...
音频播放组件
沙鑫741的博客
10-10 1592
&lt;template&gt; &lt;div class="di main-wrap" v-loading="audio.waiting"&gt; &lt;!-- 这里设置了ref属性后，在vue组件中，就可以用this.$refs.audio来访问该dom元素 --&gt; &lt;audio ref="audio" class="dn"
推荐一款神器：Vue 音频播放器组件
gitblog_00082的博客
06-07 622
推荐一款神器：Vue 音频播放器组件 vue-audio-playerCompact, simple and practical PC mobile audio player components（小巧简单实用的 PC 移动端的 Vue 音频播放器组件）项目地址:https://gitcode.com/gh_mirrors/vu/vue-audio-player 在开发网页应用时，有时我们需要集...
Vue - 音频播放器插件（vue-aplayer）
技术共享，共同进步！
12-14 9730
使用音频播放器插件（vue-aplayer）
Vue使用音频播放器插件 vue-aplayer
dyx001007的博客
10-28 1764
Vue - 音频播放器插件（vue-aplayer）
Vue 使用 js-audio-recorder 实现录制、播放、下载音频
ProgramNovice的博客
12-19 4261
Vue 使用 js-audio-recorder 实现录制、播放、下载音频
VUE 音频MP3播放插件
yx1359079856的博客
05-15 3290
这里写自定义目录标题VUE 音频MP3播放插件新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片 VUE 音频MP3播放插件 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。 新的改变 我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客： 全新的界面设计 ，将会带
vue如何用vue-video-player插件下载视频
06-01
Vue Video Player是一个Vue.js插件，可以帮助我们在网页中方便地播放视频。如果你要使用Vue Video Player插件下载视频，需要进行以下步骤： 1. 安装Vue Video Player插件。在项目目录下使用npm安装Vue Video Player： ``` npm install vue-video-player --save ``` 2. 在Vue项目中引入Vue Video Player插件。在Vue组件中引入Vue Video Player并注册： ``` <template> <video-player ref="videoPlayer" :options="playerOptions" @ended="videoEnd"></video-player> </template> <script> import VideoPlayer from 'vue-video-player' import 'video.js/dist/video-js.css' import 'vue-video-player/src/custom-theme.css' export default { components: { VideoPlayer }, data () { return { playerOptions: { autoplay: false, controls: true, sources: [{ type: "video/mp4", src: "your_video_url.mp4" }] } } }, methods: { videoEnd () { console.log('video end') } } } </script> ``` 3. 在playerOptions中，将sources的src属性设置为你要下载的视频的URL地址。 4. 在methods中编写下载视频的代码，例如： ``` methods: { downloadVideo () { let videoUrl = this.playerOptions.sources[0].src let videoName = 'video.mp4' let a = document.createElement('a') a.href = videoUrl a.download = videoName a.click() } } ``` 这段代码会创建一个a标签，设置href和download属性，然后模拟点击a标签进行下载。 5. 在页面中添加一个下载按钮，调用downloadVideo方法即可完成视频下载。 ``` <button @click="downloadVideo()">下载视频</button> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值