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. zabbix_server.conf配置文件详解

    在TTLSA学习zabbix的同学们,来看看zabbix server配置文件参数详细讲解吧.有助于你更了解zabbix.直接往下看. AlertScriptsPath 默认值:/usr/local/ ...

  2. [UE4]C++实现动态加载的问题:LoadClass<T>()和LoadObject<T>() 及 静态加载问题:ConstructorHelpers::FClassFinder()和FObjectFinder()

    转自:http://aigo.iteye.com/blog/2281558 动态加载UObject和动态加载UClass分别用LoadObject<T>(),和LoadClass<T ...

  3. [深度分析] Python Web 开发框架 Bottle

    [深度分析] Python Web 开发框架 Bottle(这个真的他妈的经典!!!) 作者:lhf2009913 Bottle 是一个非常精致的WSGI框架,它提供了 Python Web开发中需要 ...

  4. Android短信收发(二)

    接收SMS类,代码如下 //for receive SMS private SmsReceiver mSmsReceiver; @Override protected void onResume() ...

  5. PHP微信公众号开发之基本配置

    (提示:需要有服务器或云虚拟机) 一开始不明白公众号不是可以这样管理吗?                那么为什么用开发平台进行公众号开发,官方文档是这样说的 为了识别用户,每个用户针对每个公众号会产 ...

  6. C Mysql API连接Mysql

    最近都在查看MYsql C API文档,也遇到了很多问题,下面来简单的做一个总结. mysql多线程问题 mysql多线程处理不好,经常会发生coredump,见使用Mysql出core一文. 单线程 ...

  7. [TJOI2015]弦论(后缀自动机)

    /* 一道在树上乱搞的题目 建立出parent树来, 然后就能搞出每个节点往后能扩展出几个串, 至于位置不同算同一个的话就强制让right集合大小为1即可 然后在树上类比权值线段树找第k大26分统计一 ...

  8. idea 和eclipse的debug调试快捷键对比

    IntelliJ Idea 常用快捷键列表 Ctrl+Shift + Enter,语句完成“!”,否定完成,输入表达式时按 “!”键Ctrl+E,最近的文件Ctrl+Shift+E,最近更改的文件Sh ...

  9. WPF圆角按钮与触发颜色变化

    <Button x:Name="button1" Content="按钮1" Margin="10,10,0,0" Cursor=&q ...

  10. 微信小程序笔记<一>初识小程序

    一.IDE界面介绍 编辑界面 调试界面 项目管理界面 左侧工具介绍 二.项目文件类型及结构介绍 这是一个初始小程序的项目目录,其中涉及四种文件类型: *.js:JavaScript文件(JavaScr ...