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. 2012 - AD 验证域控是否成功部署

    1,验证AD DS域服务:AD DS & AD WS 2,验证“默认容器”及“Domain Controller” 3,验证“Default-First-Site-Name" 4,验 ...

  2. 禁用win7更新

    关闭自动更新服务Windows Update 第一种方法 ---------------------------------------------------------------- Win + ...

  3. CRM 2016 刷新 Iframe

    在CRM中刷新IFame: /// <summary>刷新Iframe的内容,用于表单上刷新iframe里的内容</summary> var iframe = Xrm.Page ...

  4. java运行原理剖析

    java是一种编译型语言,我们开发好的代码是不能够直接运行的,需要我们程序员进行编译之后,将字节点文件载入jvm虚拟之后,才可以运行操作 其原理是 java源代码-------编译-------> ...

  5. U3D学习10——关节和射线检测

    1.弹簧  2.铰链  3.固定关节  4.角色关节  5.自定义关节  6.raycast和raycasthit 射线有位移参数,可以设定只触发某一层的. 7.射线检测用于高速和精确 update是 ...

  6. glibc -The GNU C Library

    1.使用库文件 1.1.头文件 C库实际包含两部分:头文件,实际的库文件.头文件定义类型.定义宏.声明变量.声明函数.头文件定义的内容实际在库文件中实现.需要使用到 C库 的某些功能时,程序源文件包含 ...

  7. Linux7.3系统 升级python到3.6使用ping主机脚本

    Linux7.3默认的python系统是2.7.5,然后想着升级使用python3.6.6 1 下载 2 解压  tar fx Python-3.6.6.tgz 3  configure --pref ...

  8. fabric-ca1.03安装

    前面的文档已经成功的安装了fabric1.0.1的e2e例子.之后代码换成1.0.3版本按步骤重新安装一下,就可以切换到1.0.3了.1.0.3的脚本和启动命令没有变化,还是用的1.0.1的. 1.准 ...

  9. 使用EnterpriseLibrary插入Oracle CLOB数据

    转自:http://www.programgo.com/article/20022195177/       http://blog.csdn.net/ddxkjddx/article/details ...

  10. py库: jieba (中文词频统计) 、collections (字频统计)、WordCloud (词云)

    先来个最简单的: # 查找列表中出现次数最多的值 ls = [1, 2, 3, 4, 5, 6, 1, 2, 1, 2, 1, 1] ls = ["呵呵", "呵呵&qu ...