基于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 相关文章推荐
对象特征检测法判断浏览器对javascript对象的支持
Jul 25 Javascript
jQuery动态设置form表单的enctype值(实现代码)
Jul 04 Javascript
关于删除时的提示处理(确定删除吗)
Nov 03 Javascript
浅谈EasyUI中Treegrid节点的删除
Mar 01 Javascript
原生JS实现仿淘宝网左侧商品分类菜单效果代码
Sep 10 Javascript
详解AngularJS中的http拦截
Feb 09 Javascript
JavaWeb表单及时验证功能在输入后立即验证(含用户类型,性别,爱好...的验证)
Jun 09 Javascript
Angular指令之restict匹配模式的详解
Jul 27 Javascript
简单实现jQuery上传图片显示预览功能
Jun 29 jQuery
简易Vue评论框架的实现(父组件的实现)
Jan 08 Javascript
解决vue无法设置滚动位置的问题
Oct 07 Javascript
vue中后端做Excel导出功能返回数据流前端的处理操作
Sep 08 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
global.php
2006/12/09 PHP
PHP 的ArrayAccess接口 像数组一样来访问你的PHP对象
2010/10/12 PHP
thinkPHP实现将excel导入到数据库中的方法
2016/04/22 PHP
PHP+MYSQL实现读写分离简单实战
2017/03/13 PHP
PHP多进程编程实例详解
2017/07/19 PHP
PHP 计算两个特别大的整数实例代码
2018/05/07 PHP
PHP时间日期增减操作示例【date strtotime实现加一天、加一月等操作】
2018/12/21 PHP
PHP Primary script unknown 解决方法总结
2019/08/22 PHP
Yii框架小部件(Widgets)用法实例详解
2020/05/15 PHP
随机显示经典句子或诗歌的javascript脚本
2007/08/04 Javascript
JavaScript中的类与实例实现方法
2015/01/23 Javascript
javascript实现图片跟随鼠标移动效果的方法
2015/05/13 Javascript
JavaScript的jQuery库中ready方法的学习教程
2015/08/14 Javascript
基于jquery实现表格无刷新分页
2016/01/07 Javascript
jQuery使用$获取对象后检查该对象是否存在的实现方法
2016/09/04 Javascript
jQuery图片切换动画特效
2016/11/02 Javascript
浅述Javascript的外部对象
2016/12/07 Javascript
微信页面弹出键盘后iframe内容变空白的解决方案
2017/09/20 Javascript
微信小程序开发之tabbar图标和颜色的实现
2018/10/17 Javascript
在微信小程序中保存网络图片
2019/02/12 Javascript
原生js实现each方法实例代码详解
2019/05/27 Javascript
vue 全局封装loading加载教程(全局监听)
2020/11/05 Javascript
Python 获取当前所在目录的方法详解
2017/08/02 Python
利用python操作SQLite数据库及文件操作详解
2017/09/22 Python
Python之web模板应用
2017/12/26 Python
Python之时间和日期使用小结
2019/02/14 Python
python字典setdefault方法和get方法使用实例
2019/12/25 Python
Python如何通过百度翻译API实现翻译功能
2020/04/02 Python
Django实现任意文件上传(最简单的方法)
2020/06/03 Python
美国著名首饰网站:BaubleBar
2016/08/29 全球购物
巴西食品补充剂在线零售商:Músculos na Web
2017/08/07 全球购物
香蕉共和国工厂店:Banana Republic Factory
2018/06/09 全球购物
在线吉他课程,学习如何弹吉他:Fender Play
2019/02/28 全球购物
检察机关个人对照检查材料
2014/09/15 职场文书
2014年路政工作总结
2014/12/10 职场文书
幼儿园家长反馈意见
2015/06/03 职场文书