vue播放视频插件,vue音频播放

　　这篇文章主要给大家介绍了关于如何利用某视频剪辑软件实现简易播放器的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

　　看b站某马学习，实现一个属于自己的播放器

　　HTML+CSS+JS

　　区段id=xwyy

　　！-主体区域-

　　section class= box style= margin-top:30px；

　　div class=" nav "

　　div class=" nava "

　　氕小王音乐/h1

　　/div

　　！-搜索框-

　　div class=navb

　　输入类型= text 自动完成= off v-model。lazy= query @ keyup。enter=搜索音乐 placeholder=搜索想听的歌 /

　　/div

　　div class=boxa

　　！-歌曲列表-

　　div class=boxa1

　　保险商实验所

　　李v-for=音乐列表中的项目

　　a href= # @ click=播放音乐(item。id) class= icon字体图标-方博1 /a

　　label{{item.name}}/label

　　a href=# v-if=item.mvid！=0 @ click= playMv(item。mvid) class= icon font icon-MV /a

　　/李

　　/ul

　　/div

　　！-歌曲信息-

　　div class= box a2 :class= { playing:is playing }

　　img src= img/cd1。png class= imga /

　　img src= img/CD。png class= imgb自动旋转/

　　img:src= music cover class= imgc autoRotate /

　　/div

　　！-歌曲评论-

　　div class=boxa3

　　氕热门评论/h1

　　div class=boxa3_nr v-for=热评论中的项目

　　div class=boxa3_nr1

　　img :src=item.user.avatarUrl /

　　/div

　　div class=boxa3_nr2

　　h3{{item.nickname}}/h3

　　div class=a3p

　　/div

　　！-播放音乐-

　　div class=boxb

　　audio:src= musicUrl @ play= play @ pause= pause 控制自动播放循环

　　/音频

　　/div

　　div class=mv v-show=isShow

　　video ref= video :src= mvUrl width= 100% height= 100% controls= controls

　　/视频

　　/div

　　div class= MK @ click= hide v-show= is show

　　/div

　　/部分

　　* {

　　边距：0;

　　填充：0;

　　字体大小：12px

　　}

　　ul {

　　列表样式：无；

　　}

　　正文{

　　背景-图像：url(./img/ACG。jpg)；

　　背景尺寸：100%;

　　位置：相对；

　　}。方框{

　　宽度：1000像素

　　高度：570像素

　　背景色：rgba(205，205，205，0.4)；

　　边距：0自动；

　　位置：相对；

　　}。导航{

　　宽度：100%;

　　高度：50px

　　显示器：flex

　　justify-content:space-between；

　　对齐-项目：居中；

　　盒子大小：内容盒；

　　背景图像：线性渐变（右下方、#e66465、# 9198 E5)；

　　/*渐变*/

　　}。导航h1 {

　　左填充：20px

　　颜色：# fff

　　字体大小：16px

　　}。navb {

　　宽度：230像素

　　高度：25px

　　背景色：rgba(0，0，0，0.3)；

　　边框半径：10px

　　显示器：flex

　　对齐-项目：居中；

　　溢出：隐藏；

　　右边距：20px

　　}。navb输入{

　　宽度：80%;

　　边框：0px

　　框大小：边框-框；

　　背景色：rgba(0，0，0，0)；

　　左边距：10px

　　字体大小：12px

　　颜色：# fff

　　大纲：无/*去掉聚焦框*/

　　}

　　/*改变投入中占位符的颜色*/。navb输入：-ms-输入-占位符{

　　颜色：银色；

　　}。navb输入：-webkit-input-placeholder {

　　颜色：银色；

　　}。boxa {

　　宽度：100%;

　　最小高度：500像素

　　盒子大小：内容盒；

　　显示器：flex

　　justify-content:space-between；

　　}。方框1 {

　　宽度：250像素

　　高度：500像素

　　显示器：flex

　　对齐-内容：居中；

　　border-right: 2px solid rgba(205，205，205，0.3)；

　　溢出-x:隐藏；

　　滚动条宽度：无；

　　/*兼容火狐*/

　　-ms-溢出样式：无；

　　/*兼容IE*/

　　}。boxa1:-webkit-scrollbar {

　　/*兼容谷歌*/

　　显示：无；

　　}。盒子a1 a {

　　显示：块；

　　宽度：15px

　　高度：15px

　　/*背景-图像：url(./img/BF。jpg)；

　　背景尺寸：100%;*/

　　文字-装饰：无；

　　颜色：红色；

　　}。方框1 i {

　　显示：块；

　　宽度：15px

　　高度：15px

　　背景-图像：url(./img/2。png)；

　　}。boxa1 li {

　　显示器：flex

　　justify-content:space-between；

　　对齐-项目：居中；

　　宽度：210像素

　　填充：5px

　　页边距-顶部：10px

　　/*背景色：rgba(0，0，0，0.2)；*/

　　颜色：# 000;

　　}。盒子1标签{

　　左边距：20px

　　右边距：25px

　　}。盒子1李：第n个类型(2n-1){

　　背景色：rgba(0，0，0，0.2)；

　　颜色：# fff

　　}。方框a2 {

　　宽度：500像素

　　高度：500像素

　　border-right: 1px solid rgba(205，205，205，0.3)；

　　显示器：flex

　　对齐-内容：居中；

　　位置：相对；

　　溢出：隐藏；

　　}。方框3 {

　　宽度：250像素

　　高度：500像素

　　位置：相对；

　　溢出-x:隐藏；

　　滚动条宽度：无；

　　/*兼容火狐*/

　　-ms-溢出样式：无；

　　/*兼容IE*/

　　}。box a3:-WebKit-滚动条{

　　/*兼容谷歌*/

　　显示：无；

　　}。盒子a3 h1 {

　　位置：绝对；

　　top:5px；

　　左：40%;

　　}。boxa3_nr {

　　宽度：260像素

　　高度：

　　边距-顶部：30px

　　溢出：隐藏；

　　左边距：20px

　　}。boxa3_nr1 {

　　宽度：50px

　　高度：50px

　　浮动：左；

　　溢出：隐藏；

　　边框半径：50px

　　}。boxa3_nr2 {

　　宽度：150像素

　　高度：

　　左边距：10px

　　浮动：左；

　　溢出：隐藏；

　　}。boxa3_nr2 h3 {

　　字号：15px

　　}。清除{

　　清除：左侧；

　　}。a3p {

　　宽度：150像素

　　高度：

　　边距-顶部：5px

　　}。boxa3 img {

　　宽度：100%;

　　身高：100%;

　　}。方框b {

　　宽度：100%;

　　高度：40px

　　背景色：aliceblue

　　}。方框b音频{

　　宽度：100%;

　　身高：100%;

　　}

　　/*是否正在播放*/。方框a2。正在播放. imgb。方框a2。正在播放100 . imgc {

　　动画-播放-状态：运行；

　　}

　　/*杆*/。方框a2。正在播放100 . imga {

　　变换：旋转(45度);

　　过渡：5s；

　　}

　　@关键帧旋转{

　　从{

　　transform:rotateZ(0)；

　　}

　　到{

　　变换：rotateZ(360度)；

　　}

　　/*旋转的类名*/。自动旋转{

　　动画-名称：旋转；

　　动画-迭代-计数：无限；

　　动画-播放-状态：暂停；

　　动画-计时-功能：线性；

　　动画-时长：5s；

　　}。imga {

　　显示：块；

　　宽度：120像素

　　高度：60px

　　位置：绝对；

　　顶：-5px；

　　右：100像素

　　z指数：3;

　　变换：旋转(0);

　　transform-origin:12px 12px；

　　过渡：5s；

　　}。imgb {

　　显示：块；

　　宽度：300像素

　　高度：300像素

　　边距-顶部：50px

　　位置：相对；

　　}。imgc {

　　显示：块；

　　宽度：220像素

　　高度：220像素

　　位置：绝对；

　　top:19%；

　　左：29%;

　　z指数：-2;

　　边框半径：100像素；

　　}。mv {

　　宽度：1000像素

　　高度：600像素

　　位置：绝对；

　　背景色：# 000;

　　top:0；

　　左：0;

　　z指数：7;

　　}。马其顿

　　宽度：1000像素

　　高度：600像素

　　位置：绝对；

　　top:0；

　　左：0;

　　transform:scale(6)；

　　背景色：rgba(0，0，0，0.7)；

　　z指数：5;

　　}。平均变化视频{

　　宽度：100%;

　　身高：100%;

　　填充：0px

　　边距：0px

　　}

　　var xwyy=new Vue({

　　埃尔： #xwyy ，

　　数据：{

　　查询：,

　　音乐列表：[],

　　音乐Url:“”，

　　音乐封面：,

　　热门评论：[],

　　isPlayin:false，

　　isShow:假，

　　mvUrl:" "

　　方法：{

　　/*歌曲搜索*/

　　searchMusic:function(){

　　变那个=这个

　　axios。获取( https://秋鱼。cn/搜索？keywords= this.query)。然后（函数（响应){

　　那个。音乐列表=响应。数据。结果。歌曲；

　　},函数(err){ })；

　　/*歌曲播放*/

　　播放音乐：功能(音乐id){

　　变那个=这个

　　/*获取歌曲地址*/

　　axios。获取( https://秋鱼。cn/song/URL？id= muiscId)。然后（函数（响应){

　　那个。musicurl=响应。数据。数据[0].网址；

　　}，function(err){})

　　/*获取歌曲图片*/

　　axios。获取( https://秋鱼。cn/song/detail？ids= muiscId)。然后（函数（响应){

　　那个。音乐翻唱=回应。数据。歌曲[0]。艾尔。pic URL

　　}，function(err){})

　　/*获取歌曲评论*/

　　axios。获取( https://秋鱼。cn/评论/热？type=0id= muiscId)。然后（函数（响应){

　　那个。热评=回应。数据。热评；

　　}，function(err){})

　　/*播放*/

　　play:function(){

　　this.isPlayin=true

　　/*暂停*/

　　暂停：函数(){

　　this.isPlayin=false

　　播放Mv:函数(mvid){

　　变那个=这个

　　axios。获取( https://秋鱼。cn/mv/URL？id= mvid)。然后（函数（响应){

　　那个。is show=true

　　那个。mv URL=响应。数据。数据。网址；

　　}，function(err){})

　　/*隐藏mv*/

　　hide:function(){

　　this.isShow=false

　　/*关闭mv*/

　　这个参考文献。视频。pause()；

　　}

　　});

　　总结

　　到此这篇关于利用某视频剪辑软件实现简易播放器的文章就介绍到这了，更多相关某视频剪辑软件实现简易播放器内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。

相关文章阅读