1. v.vue文件:

<template>
<div>
<div class="contain">
<my-video :sources="video.sources" :options="video.options" class="video">
</my-video>
</div>
</div>
</template> <script>
import myVideo from 'vue-video'
export default {
data() {
return {
video: {
sources: [{
src: '../../../../static/video/v.mp4'
}],
options: {
autoplay: true,
volume: 0.6,
poster: 'http://covteam.u.qiniudn.com/poster.png'
}
}
}
},
components: {
myVideo
}
}
</script>

2. v.css文件:(video需要一定的宽和高)

.video{
width:100px;
height:100px;
}

vue项目插入视频-mp4的更多相关文章

  1. 在Vue项目使用quill-editor带样式编辑器(更改插入图片和视频)

    vue-quill-editor默认插入图片是直接将图片转为base64再放入内容中,如果图片比较大的话,富文本的内容就会很大. 插入视频是直接弹框输入URL地址,某些需求下我们需要让用户去本地选择自 ...

  2. 后盾网lavarel视频项目---Vue项目使用vue-awesome-swiper轮播插件

    后盾网lavarel视频项目---Vue项目使用vue-awesome-swiper轮播插件 一.总结 一句话总结: vue中的插件的使用和js插件的使用一样的简单,只是vue插件的引入过程有些不同 ...

  3. C#/VB.NET 向PowerPoint文档插入视频

    如今,Microsoft Office PowerPoint在我们日常生活中的应用已经很广泛了,利用Microsoft Office PowerPoint不仅可以创建演示文稿,还可以在互联网上召开面对 ...

  4. H5插入视频兼容主浏览器

    插入视频的方法有很多种,但是有一些方法不兼容. 方法1:DW插入视频利用DW插入的视频为flv格式,操作较简单,但是代码复杂,需要浏览器支持flash插件:火狐浏览器需要手动下载flash插件,比较麻 ...

  5. 【转】向HTML中插入视频并兼容所有浏览器的方法

    原文地址:http://www.jb51.net/web/168548.html 向HTML中插入视频有两种方法,一种是古老的object标签,一种是html5中的video标签,前者兼容性相对好些, ...

  6. 如何在html中插入视频

    如何在html中插入视频 1,插入优酷视频: 在优酷分享界面有个html代码,直接复制放入body中,定义div的align居中即可 2.插入本地视频:用video属性  用mp4格式 <vid ...

  7. 动态获取爱奇艺上传视频mp4格式url地址

    有时候,在工作中有些客户需要用到视频,我们大家都知道视频是非常的耗费流量的,因此,如果因为项目要求客户单独买台视频服务器是非常划不来的.那么将视频上传到优酷,爱奇艺等视频网站来托管那是一件很好的解决方 ...

  8. HTML中插入视频

    最常用的向HTML中插入视频的方法有两种,一种是古老的<object></object>标签,一种是html5中的<video></video>标签. ...

  9. vue项目目录介绍

    Vue项目目录 初始化项目 vue init webpack []projectname] cd [projectname] npm install vue run dev 目录树 +---build ...

随机推荐

  1. MapReduce Demo

    功能:统计公司员工一个月内手机上网上行流量.下行流量及总流量. 测试数据如下: 13612345678     6000    1000 13612345678     2000    3000 13 ...

  2. CS229 6.6 Neurons Networks PCA主成分分析

    主成分分析(PCA)是一种经典的降维算法,基于基变换,数据原来位于标准坐标基下,将其投影到前k个最大特征值对应的特征向量所组成的基上,使得数据在新基各个维度有最大的方差,且在新基的各个维度上数据是不相 ...

  3. SurFS:共享式和分布式集群各取所长

    http://www.ccidnet.com/2016/0811/10168835.shtml 一个集群系统可以做成三层定义,也就是后端存储访问层.沟通协作层.前端数据访问层,如果愣是要给每个层起个洋 ...

  4. 关于python中生成器之Send方法

    #send主要是用于外部与生成器对象的交互def func1(): # 生成器函数 print("ok1") x = 10 # 函数内局部变量x赋值为10 print(x) x = ...

  5. 在同一个Linux上配置多个git账户

    1.首先在~/.ssh目录下执行 ssh-keygen -t rsa -C "miaoying.new@qq.com" 其中 -C "miaoying.new@qq.co ...

  6. 【Selenium-WebDriver问题点】chromeDriver和chrome浏览器版本之间的兼容性问题

    今天早晨因为测试需求,将chrome浏览器更新到最新的65版本,结果之前用的chromeDriver测试计划,都跑不通过了, 所以就在网上找了下,mark下. 最新的chromedriver与chro ...

  7. netfilter/iptables

    参考:tcp/ip协议 1.Linux框架概念 1.1.工作流程图 1.2.功能: ①过滤(filter) ②修改源ip.目标ip(nat) ③拆解报文.修改报文标记.重新封装(mangle) ④关闭 ...

  8. android 开发 实现一个带图片Image的ListView

    注意:这种实现方法不是实现ListView的最优方法,只是希望通过练习了解ListView的实现原理 思维路线: 1.创建drawable文件夹将要使用的图片导入进去 2.写一个类,用于存放图片ID数 ...

  9. http 文件传输

    http 文件传输 https://www.zhihu.com/question/58118565 转载自:http://www.voidcn.com/article/p-rpdhbjib-m.htm ...

  10. django之ModelBase类及mezzanine的page link类

    class ModelBase(type): """ Metaclass for all models. """ def __new__(c ...