水平滑动,记录当前状态、利用浏览器原生播放器播放视频和vue-video-player视频播放插件、基于museUI的音频播放和vue-player插件实现音频播放

  1. 云栖社区>
  2. 博客>
  3. 正文

水平滑动,记录当前状态、利用浏览器原生播放器播放视频和vue-video-player视频播放插件、基于museUI的音频播放和vue-player插件实现音频播放

廊桥梦醉 2018-06-21 15:07:00 浏览1021
展开阅读全文

一、水平滑动,记录当前状态

当水平内容在一屏展示不全的时候,需要使用属性,white-space:no-wrap,来强制内容在同一行,同时使用overflow-x:scroll来让元素在水平方向可以滑动。

在这种情况下,早筛选列表中,想要记录当前筛选项的位置:

先看布局

img_9cba7323dd6b653f7cf1e9231d39266f.png

js实现

1.获取到当前点击的是第一个元素

var aa=this.gradeId-1;

        var ll=0;

          setTimeout(()=>{

2.获取到点击的元素的宽度

ll=document.getElementById('sort-name-spacial').getElementsByClassName('sort-name-item')[0].offsetWidth;

              console.log(ll);

3.设置父盒子的scrollLeft值定于每一个子元素的宽度*元素的下标值

document.getElementById('sort-name-spacial').scrollLeft=ll*aa;

          },100);

二、视屏播放

(1)利用浏览器原生播放器,实现视频方法功能

直接利用a标签就能实现

img_f369499f53fe72b235fb734ba0391f58.png

(2)vue插件vue-video-player

官方github: https://github.com/surmon-china/vue-video-player

安装依赖 npm install vue-video-player -S

引入配置

img_2544f0644a9bf9d5cd4da4a66ba9b6f9.png

实现代码

img_1eef7404113a0f478c7aedbdb9ad8a1d.png

css部分 设置播放按钮的形状与位置

.video-js.vjs-big-play-button{}

三、音频播放

(1)基于museUI的音频播放

安装muse-ui

npm i muse-ui -S

在main.js中引入

import MuseUI from "muse-ui"

import 'muse-ui/dist/muse-ui.css'

Vue.use(MuseUI)

接下来是在组件中的实现

模板布局部分

img_db9cfa651fa267195b32009151224a2b.png

js部分

img_8f8068465ccf1da04e732606f88e45a9.png
img_c5fd8259a7c8926905b46b169ddcfbf5.png
img_4cdd540fb52ed5d5e534544727fa66f6.png
img_2c38a98c837a40c3a4e38da3b3d7390c.png

最终的效果

img_c2b7439368e42f8fc902ea9116451162.png

css部分不做展示了,可以在git上观看

(2)vue-player实现的音频播放

这个组件是aplayer基于vue的实现,并不断的更新完善,而不仅仅只是一层封装

安装:$ npm install vue-aplayer --save

使用:

在需要的文件引入该插件

import Aplayer from 'vue-aplayer'

组件代码

img_09a4345c246f2837a65c33765ac1cf47.png

属性:

这些属性大部分跟Aplayer的选项一样

img_0d965a327d4c2ed05c21c2881ecd250e.png

歌曲信息

属性music既可以是包含歌曲信息的对象类型,也可以是包含这些对象的数组类型

img_19e0433dd243de2995f78bee4988882c.png

事件

img_4950aa53d7338368a0aa705248d0a107.png

源文件地址:https://www.javascriptcn.com/read-6485.html

git地址: https://github.com/wangAlisa/-vue

网友评论

登录后评论
0/500
评论
廊桥梦醉
+ 关注