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. Css学习(2)

    1 标签分类(显示方式) 块元素 典型代表,Div,h1-h6,p,ul,li 特点: ★独占一行 ★可以设置宽高 ★ 嵌套(包含)下,子块元素宽度(没有定义情况下)和父块元素宽度默认一致. 行内元素 ...

  2. Python的可迭代对象、迭代器和生成器

    可迭代对象(Iterable) 这些可以直接作用于for循环的对象统称为可迭代对象:Iterable. 我们已经知道,可以直接作用于for循环的数据类型有以下几种: 一类是集合数据类型,如list.t ...

  3. boost json序列化

    json序列化 #ifndef FND_JSON_OBJECT_H #define FND_JSON_OBJECT_H #include <sstream> #include <bo ...

  4. boost serialize序列化

    boost序列化 #ifndef FND_SERI_H #define FND_SERI_H #include <boost/archive/text_oarchive.hpp> #inc ...

  5. css初探

    CSS 语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. selector {                   property: value;                 ...

  6. 请求(Request)的参数(Param)里包含特殊字符(#等)的正确处理方式

    当调用restful接口,并且url中有参数传过去时,比如http://test.com?param=woshi#miaoyinga. 后台在使用@RequestParam("param&q ...

  7. flask 简单的语音识别

    from aip import AipSpeech,AipNlp #AipNlp 为自然语言处理 """ 你的 APPID AK SK """ ...

  8. 500 Internal Privoxy Error

    打开网站突然发现网站无法打开了,一脸懵逼,服务器重启也不行,明明能ping通,网上查的答案千奇百怪的 500 Internal Privoxy Error Privoxy encountered an ...

  9. 【Jmeter自学】Jmeter作用域(五)

    .Jmeter作用域 .Jmeter参数化 .Jmeter的集合点 .jmeter之关联 1.Jmeter作用域 问题: 每个元件作用域 层次结构确认 每个元件执行顺序 配置元件 前置 定时器 Sam ...

  10. android 开发 在一个工具类(或者适配器class)里启动activity

    实现思路: 1.需要给工具类里传入context: 2.使用上下文mContext.startActivity启动activity 例子1: public class SafePlaceRecycle ...