基于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 相关文章推荐
js中获取事件对象的方法小结
Mar 13 Javascript
jquery中dom操作和事件的实例学习 仿yahoo邮箱登录框的提示效果
Nov 30 Javascript
JS特权方法定义作用以及与公有方法的区别
Mar 18 Javascript
js根据鼠标移动速度背景图片自动旋转的方法
Feb 28 Javascript
BootStrap轻松实现微信页面开发代码分享
Oct 21 Javascript
JS简单判断字符在另一个字符串中出现次数的2种常用方法
Apr 20 Javascript
javaScript 逻辑运算符使用技巧整理
May 03 Javascript
VUE元素的隐藏和显示(v-show指令)
Jun 23 Javascript
vue+element-ui集成随机验证码+用户名+密码的form表单验证功能
Aug 05 Javascript
Vue v-text指令简单使用方法示例
Sep 19 Javascript
创建nuxt.js项目流程图解
Mar 13 Javascript
vue 使用 sortable 实现 el-table 拖拽排序功能
Dec 26 Vue.js
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
一个php作的文本留言本的例子(三)
2006/10/09 PHP
PHP带节点操作的无限分类实现方法详解
2016/11/09 PHP
JavaScript类和继承 constructor属性
2010/03/04 Javascript
JS中confirm,alert,prompt函数使用区别分析
2010/04/01 Javascript
关于JavaScript定义类和对象的几种方式
2010/11/09 Javascript
javascript代码编写需要注意的7个小细节小结
2011/09/21 Javascript
js通过地址栏给action传值(中文乱码全是问号)
2013/05/02 Javascript
javascript判断非数字的简单例子
2013/07/18 Javascript
javascript控制Div层透明属性由浅变深由深变浅逐渐显示
2013/11/12 Javascript
JavaScript中的各种操作符使用总结
2016/05/26 Javascript
js字符串操作总结(必看篇)
2016/11/22 Javascript
JS中用try catch对代码运行的性能影响分析
2016/12/26 Javascript
微信小程序 合法域名校验出错详解及解决办法
2017/03/09 Javascript
vue封装第三方插件并发布到npm的方法
2017/09/25 Javascript
详解使用element-ui table组件的筛选功能的一个小坑
2018/11/02 Javascript
纯js+css实现仿移动端淘宝网站的弹出详情框功能
2019/12/29 Javascript
Python 随机生成中文验证码的实例代码
2013/03/20 Python
python合并已经存在的sheet数据到新sheet的方法
2018/12/11 Python
python实现创建新列表和新字典,并使元素及键值对全部变成小写
2019/01/15 Python
python join方法使用详解
2019/07/30 Python
python代码 FTP备份交换机配置脚本实例解析
2019/08/01 Python
PyCharm中如何直接使用Anaconda已安装的库
2020/05/28 Python
python3字符串输出常见面试题总结
2020/12/01 Python
python gui开发——制作抖音无水印视频下载工具(附源码)
2021/02/07 Python
H5 canvas实现贪吃蛇小游戏
2017/07/28 HTML / CSS
凯伦·米莲女装网上商店:Karen Millen
2017/11/07 全球购物
以下的初始化有什么区别
2013/12/16 面试题
五年级语文教学反思
2014/01/30 职场文书
技术比武方案
2014/05/19 职场文书
农民工预备党员思想汇报
2014/09/14 职场文书
罗马假日观后感
2015/06/08 职场文书
公司员工管理制度
2015/08/04 职场文书
2016计划生育先进个人事迹材料
2016/02/29 职场文书
Java 在生活中的 10 大应用
2021/11/02 Java/Android
Java实现学生管理系统(IO版)
2022/02/24 Java/Android
Python pyecharts案例超市4年数据可视化分析
2022/08/14 Python