基于Vue插入视频的2种方法小结


Posted in Javascript onApril 02, 2019

基于Vue插入视频的2种方法小结

屏幕快照 2019-04-01 下午8.06.02.png

方法一:iframe插入视频链接

1.1 ##### 当前播放的视频

<div class="video-wrap" style="width:80%;float:left;oveflow:hidden;">
     <iframe :src="this.activeVideo.youtobeURL" frameborder='0'
     allow='autoplay;encrypted-media' allowfullscreen style='width:100%;height:500px;'>
     </iframe>
     <h3>{{this.activeVideo.title}}</h3>
    </div>

1.2#####视频列表

<div class="video-list" style="float:right;width:20%;text-align:center;">
    <div v-for='video in videos' :key='video.id' class="thumbnail" >
     <div class="thumbnail-img" >
      <div style="height:50%;width:100%;position:absolute;z-index:999"
      @click="activeVideoShow(video.id)"></div>
     <iframe :src='video.youtobeURL' :alt="video.title" />
     </div>
     <div class="thumbnail-info">
      <h4>{{video.title}}</h4>
      <div class="thumbnail-views">
      <span>{{video.speaker}}</span>
      <span>{{video.views}} Views</span>
      </div>
      <div class="thumbnail-describe">
      {{video.describe}}
      </div>
     </div>
    </div>
   </div>

1.3#####定义的数据结构(自己写的demo,可能实际中后台返的数据结构会有所不同)

data () {
  return {
   flag:false,
   videos:[{
    id:1,title:'test2',youtobeURL:'http://player.youku.com/embed/XMzcwNTY3NTM2MA',speaker:'harry', likes:101,views:0,describe:'good'
   },{
    id:2,title:'test3',youtobeURL:'http://player.youku.com/embed/XMzcwNTY3NTM2MA',speaker:'harry', likes:100,views:75,describe:'good'
   }],
   activeVideo:{
    id:3,title:'test1',thumbnail:'./../../static/images/headImg.png',speaker:'harry', likes:0,views:0,describe:'good',
    youtobeURL:'http://player.youku.com/embed/XMzcwNTY3NTM2MA'
   }
  }
 }

1.4##### 点击视频列表中的视频转变为当前视频

ps:最开始的时候把点击事件写在iframe上,但是点击无效。后来写了个div,完美解决:

<div style="height:50%;width:100%;position:absolute;z-index:999"
      @click="activeVideoShow(video.id)"></div>

1.5#####转换当前视频的点击事件:通过id来判断当前点击的是哪个

activeVideoShow(id){
  this.videos.filter(item=>{
     if(id == item.id){
      this.activeVideo=item
     }
    }) 
  }

方法二:引用了vue-video-player插件(没有视频列表)

相对于iframe方法写了一堆div和style,vue-video-player简直精简到起飞

2.1#####第一次用这个插件,不是很熟悉,所以根据官方的API 写了一个videoPlayer的组件,代码如下:

<div>
    <video ref="videoPlayer" class="video-js"></video>
  </div>

2.1-1#####需要引入video.js和定义相关的options

import videojs from 'video.js'
---------------------------------
props:{
    options:{
      type:Object,
      default(){
        return{
        }
      }
    }
  },
data(){
    return{
      player:null
    }
  },
mounted(){
    this.player=videojs(this.$refs.videoPlayer,this.options,function onPlayerReady(){
      console.log('onPlayerReady',this)
    })
  }

2.2#####在插入视频的页面中引入上面的videoPlayer组件,在view层代码如下:

<video-player class="video-player vjs-custom-skin "
    ref="videoPlayer"
    :playsinline='false'
    :options='videoOptions'
    @play="onPlayerPlay($event)" 
    @pause='onPlayerPause($event)'
    @statechagned='playerStateChanged($event)'
    >
    </video-player>

2.3#####需要引入的插件

import './../../node_modules/video.js/dist/video-js.css'
import './../../node_modules/vue-video-player/src/custom-theme.css'
import videojs from 'video.js'
import {videoPlayer} from 'vue-video-player'
import 'videojs-flash'
import VideoPlayer from '@/components/videoPlayer.vue'

2.3-1#####定义相关数据

props:{
   state:Boolean,
  },
data(){
    return{
      videoOptions:{
        playbackRates:[1.0,1.5,2.0], // 播放速度
        autoplay:false, // 如果true,浏览器准备好时开始回放
        controls:true,
        muted:false, // 默认情况下将会消除任何音频
        loop:false, //循环播放
        preload:'auto', // <video>加载元素后立即加载视频
        language:'zh-CN',
        aspectRatio:'16:9', //流畅模式,并计算播放器动态大小时使用该值
        fluid:true, //按比例缩放以适应容器
        sources:[{
         src:'http://vjs.zencdn.net/v/oceans.mp4',
         type:'video/mp4'
        }],
        poster:'http://vjs.zencdn.net/v/oceans.png', // 封面地址
        notSupportedMessage:'此视频暂无法播放,请稍后再试',
      }
    }
  }

代码地址: https://github.com/yinglichen/videoPlayer

ps:用canvas写了个字幕功能,还有待修缮,后期补上。

总结

以上所述是小编给大家介绍的基于Vue插入视频的2种方法小结,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
各情景下元素宽高的获取实现代码
Sep 13 Javascript
js 为label标签和div标签赋值的方法
Aug 08 Javascript
JavaScript初学者建议:不要去管浏览器兼容
Feb 04 Javascript
详解JavaScript中的表单验证
Jun 16 Javascript
jquery插件pagination实现无刷新ajax分页
Sep 30 Javascript
真正好用的js验证上传文件大小的简单方法
Oct 27 Javascript
jQuery实现限制文本框的输入长度
Jan 11 Javascript
微信小程序表单验证form提交错误提示效果
Jun 19 Javascript
JavaScript设计模式之缓存代理模式原理与简单用法示例
Aug 07 Javascript
Vue.js中对css的操作(修改)具体方式详解
Oct 30 Javascript
js getBoundingClientRect使用方法详解
Jul 17 Javascript
工作中常用js功能汇总
Nov 07 Javascript
vue踩坑记-在项目中安装依赖模块npm install报错
Apr 02 #Javascript
小程序实现自定义导航栏适配完美版
Apr 02 #Javascript
es6 symbol的实现方法示例
Apr 02 #Javascript
微信小程序设置全局请求URL及封装wx.request请求操作示例
Apr 02 #Javascript
Vue CLI 3.x 自动部署项目至服务器的方法
Apr 02 #Javascript
Vue 组件修改根实例的数据的方法
Apr 02 #Javascript
vue鼠标悬停事件实例详解
Apr 01 #Javascript
You might like
【COS正片】蕾姆睡衣cos,纯洁可爱被治愈了 cn名濑弥七
2020/03/02 日漫
mayfish 数据入库验证代码
2010/04/30 PHP
php判断邮箱地址是否存在的方法
2016/02/13 PHP
php简单随机字符串生成方法示例
2017/04/19 PHP
php关联数组与索引数组及其显示方法
2018/03/12 PHP
PHP编程一定要改掉的5个不良习惯
2020/09/18 PHP
关于IFRAME 自适应高度的研究
2006/07/20 Javascript
Javascript优化技巧(文件瘦身篇)
2008/01/28 Javascript
网页开发中的容易忽略的问题 javascript HTML中的table
2009/04/15 Javascript
jquery分页插件AmSetPager(自写)
2013/04/15 Javascript
固定表格行列(expression)在IE下适用
2013/07/25 Javascript
浅谈轻量级js模板引擎simplite
2015/02/13 Javascript
使用AngularJS和PHP的Laravel实现单页评论的方法
2015/06/19 Javascript
JS模拟Dialog弹出浮动框效果代码
2015/10/16 Javascript
JSON简介以及用法汇总
2016/02/21 Javascript
浅谈js之字面量、对象字面量的访问、关键字in的用法
2016/11/20 Javascript
javascript history对象详解
2017/02/09 Javascript
JS使用插件cryptojs进行加密解密数据实例
2017/05/11 Javascript
通俗易懂地解释JS中的闭包
2017/10/23 Javascript
解决在vue+webpack开发中出现两个或多个菜单公用一个组件问题
2017/11/28 Javascript
JavaScript实现轮播图特效
2020/04/10 Javascript
原生js实现html手机端城市列表索引选择城市
2020/06/24 Javascript
JavaScript的垃圾回收机制与内存管理
2020/08/06 Javascript
微信小程序实现星星评分效果
2020/11/01 Javascript
解决vuex改变了state的值,但是页面没有更新的问题
2020/11/12 Javascript
[06:06]2018DOTA2亚洲邀请赛主赛事第四日战况回顾 全明星赛欢乐上演
2018/04/07 DOTA
用Python编写简单的微博爬虫
2016/03/04 Python
Python实现求数列和的方法示例
2018/01/12 Python
详解python 3.6 安装json 模块(simplejson)
2019/04/02 Python
python数据库编程 Mysql实现通讯录
2020/03/27 Python
Python约瑟夫生者死者小游戏实例讲解
2021/01/04 Python
python 基于DDT实现数据驱动测试
2021/02/18 Python
用HTML5中的Canvas结合公式绘制粒子运动的教程
2015/05/08 HTML / CSS
罗马尼亚在线杂货店:Pilulka.ro
2019/09/28 全球购物
党的群众路线调研报告
2014/11/03 职场文书
Golang中interface{}转为数组的操作
2021/04/30 Golang