基于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种方法小结,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

(0)

相关推荐

  • Vue结合Video.js播放m3u8视频流的方法示例

    首先,我们需要在vue工程中安装video.js相关依赖. npm install --save video.js npm install --save videojs-contrib-hls 然后,我们需要引入videojs的css文件,例如在main.js中引入 import 'video.js/dist/video-js.css' 接着,我们在需要播放视频的页面引入js对象 import videojs from 'video.js' import 'videojs-contrib-hls

  • vue富文本框(插入文本、图片、视频)的使用及问题小结

    今天在vue里面插入富文本遇到了一些小坑在这里提供给大家用于参考,如有错误,望多加指正. 我这里使用的是Element-ui的上传图片组件 首先引入Element-ui(这个我就不作赘述了,详情参考element中文官网) 在引入富文本组件vue-quill-editor 使用在main.js引入相应的样式 import VueQuillEditor from 'vue-quill-editor' import 'quill/dist/quill.core.css' import 'quill/

  • Vue 莹石摄像头直播视频实例代码

    Vue 莹石摄像头直播视频代码. HTML代码: <div class="mainClass" v-show="rtmp_url!=''"> <video id="myPlayer" controls playsinline webkit-playsinline autoplay> <source type="application/x-mpegURL" :src="http_url&q

  • 基于 Vue.js 2.0 酷炫自适应背景视频登录页面实现方式

    本文讲述如何实现拥有酷炫背景视频的登录页面,浏览器窗口随意拉伸,背景视频及前景登录组件均能完美适配,背景视频可始终铺满窗口,前景组件始终居中,视频的内容始终得到最大限度的保留,可以得到最好的视觉效果.并且基于 Vue.js 2.0 全家桶.具体效果如下图所示: 最终效果可以翻到文章最后观看. 1. 背景视频 Web 页面的既有实现方式 国外有一个很好的网站 「Coverr」 ,提供了完善的教程和视频资源,帮助前端开发者构建酷炫的背景视频主页,网站效果示例如下图所示: 教程如下所示: 从图中以及我

  • vue 录制视频并压缩视频文件的方法

    文件上传框<input type="file">,除了可以选择文件上传之外,还可以调用摄像头来拍摄照片或者视频并上传.capture属性可以判断前置or后置摄像头.在视频播放的过程中,用canvas定时截取一张图片,然后用gif.js生成一张GIF图,从而完成前端的视频压缩. 我这里使用的是Vue写的,以下是我的流程及代码: 一.下载gif.js相关文件,可以到这里下载,然后将这几个文件放在根目录的static/js里面. gif.js相关文件及存放路径 二.下载依赖包:

  • vue2.0实现音乐/视频播放进度条组件

    基于vue2.0实现音乐/视频播放进度条组件的方法及代码解释,具体内容如下 需求分析: ①:进度条随着歌曲的播放延长,歌曲播放完时长度等于黑色总进度条长度:时间实时更新. ②:当滑动按钮时,实时更新播放时间,橙色进度条长度也会随着按钮的滑动而改变,当滑动结束时,橙色区域停留在滑动结束的位置,歌曲从当前进度开始播放. ③:点击进度条,橙色进度条长度变为点击处至起点的长度,并从当前点开始播放歌曲. 大概思路: ①:左边的时间可以通过audio播放时派发的timeupdate事件获取,右边的时间为接口

  • 基于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;encryp

  • Vue 创建组件的两种方法小结(必看)

    创建组件的两种方法小结 1.全局注册 2.局部注册 var child=Vue.extend({}) var parent=Vue.extend({}) Vue.extend() 全局方法 生成构造器,创建子类 使用基础 Vue 构造器,创建一个"子类". 这样写非常繁琐.于是vue进行了简化 使用Vue.component()直接创建和注册组件: Vue.component(id,options) 全局方法 用来注册全局组件 id 是string类型,即是注册组件的名称 option

  • 基于Java数组实现循环队列的两种方法小结

    用java实现循环队列的方法: 1.添加一个属性size用来记录眼下的元素个数. 目的是当head=rear的时候.通过size=0还是size=数组长度.来区分队列为空,或者队列已满. 2.数组中仅仅存储数组大小-1个元素,保证rear转一圈之后不会和head相等.也就是队列满的时候.rear+1=head,中间刚好空一个元素. 当rear=head的时候.一定是队列空了. 队列(Queue)两端同意操作的类型不一样: 能够进行删除的一端称为队头,这样的操作也叫出队dequeue: 能够进行插

  • Vue 权限控制的两种方法(路由验证)

    下面介绍两种权限控制的方法: 路由元信息(meta) 动态加载菜单和路由(addRoutes) 路由元信息(meta) 如果一个网站有不同的角色,比如 管理员 和 普通用户 ,要求不同的角色能访问的页面是不一样的 这个时候我们就可以 把所有的页面都放在路由表里 ,只要 在访问的时候判断一下角色权限 .如果有权限就让访问,没有权限的话就拒绝访问,跳转到404页面 vue-router 在构建路由时提供了元信息 meta 配置接口,我们可以在元信息中添加路由对应的权限,然后在路由守卫中检查相关权限,

  • Android多媒体教程之播放视频的四种方法

    本文主要给大家介绍的是关于Android播放视频的四种方法,分享出来供大家参考学习,下面来一起看看详细的介绍: 一.通过intent的方式,调用系统自带的播放器 Uri uri = Uri.parse("/storage/emulated/0/DCIM/Camera/20170521_200117.mp4"); //调用系统自带的播放器 Intent intent = new Intent(Intent.ACTION_VIEW); intent.setDataAndType(uri,

  • Vue 实现列表动态添加和删除的两种方法小结

    下面将介绍两种方式实现动态添加和删除列表 1.不使用组件 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 - vue实现列表增加和删除</title> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script&g

  • mysql大批量插入数据的4种方法示例

    前言 本文主要给大家介绍了关于mysql大批量插入数据的4种方法,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧 方法一:循环插入 这个也是最普通的方式,如果数据量不是很大,可以使用,但是每次都要消耗连接数据库的资源. 大致思维如下 (我这里写伪代码,具体编写可以结合自己的业务逻辑或者框架语法编写) for($i=1;$i<=100;$i++){ $sql = 'insert...............'; //querysql } foreach($arr as $key =

  • 基于Vue和Element-Ui搭建项目的方法

    首先要求事先安装node和npm 没有安装的自行百度或在论坛里面搜索! 提示:在命令行分别输入node -v(node和-v之间有个空格) 和npm -v(同样有个空格)可查看当前的node和npm版本 创建vue项目 1.创建一个项目文件夹,记住文件夹路径,如我的是F:\AppCode 2.打开cmd命令通过cd指令进入到刚才创建的文件夹路径F:\AppCode. 输入npm install -g cnpm –registry=https://registry.npm.taobao.org安装

  • 防止MySQL重复插入数据的三种方法

    新建表格 CREATE TABLE `person` ( `id` int NOT NULL COMMENT '主键', `name` varchar(64) CHARACTER SET utf8 COLLATE utf8_bin NULL DEFAULT NULL COMMENT '姓名', `age` int NULL DEFAULT NULL COMMENT '年龄', `address` varchar(512) CHARACTER SET utf8 COLLATE utf8_bin N

  • vue 获取url里参数的两种方法小结

    我就废话不多说了,大家还是直接看代码吧~ 第一种: const query = Qs.parse(location.search.substring(1)) let passport = query.passport; 第二种: var query=this.$route.query; let lat = query.lat; 补充知识:Vue通过query获取路由参数 现在来讲Vue通过query获取路由参数 可以看见com1组件里的路由参数为 name=zhangsan&job=teache

随机推荐