基于某视频剪辑软件插入视频的2种方法小结

屏幕快照2019-04-01 下午8.06.02.png

方法一：iframe插入视频链接

1.1 ##### 当前播放的视频

div class=' video-wrap ' style=' width :80%；float : left ' oveflow : hidden ' iframe : src=' http : this。活动视频。youtobeurl '框架边框=' 0 '允许='自动播放；加密媒体"允许全屏样式="宽度：100%；"height :500 px '/iframe H3 { { this。活动视频。title } }/H3/div 1.2 # # # # # #视频列表

div class=' video-list ' style=' float : right；宽度：20%;'文本对齐：中心；div v-for='video中的视频：键='视频。id ' class=' thumbnail ' div class=' thumbnail-img ' div style=' height :50%；宽度：100%;位置：绝对；z-index :999 ' @ click='活动视频显示(视频。id)'/div iframe : src='视频。youtobeurl ' : alt='视频。H4 { {视频。标题} }/H4 div class='缩略图-视图' span { {视频。扬声器} }/span { {视频。view } } view/span/div class='缩略图-描述' {视频。描述} }/div .定义的数据结构（自己写的演示，可能实际中后台返的数据结构会有所不同)

data () { return { flag:false，videos:[{ id:1，title:'test2 '，youtobeurl : ' http://player。优酷。com/embed/xmzwnty3n tm2ma '，speaker:'harry '，likes:101，views:0，descriptbe : ' good ' }，{ id:2，title: ' test3 '，/././static/images/headImg.png '，speaker:'harry '，likes:0，views:0，describe: ' good '，youtoberl : ' http://player。优酷。com/embed/xmzwnty3n tm2ma ' } } } 1.4 # # # # # #点击视频列表中的视频转变为当前视频

ps:最开始的时候把点击事件写在内联框架上，但是点击无效。后来写了个div，完美解决：

div style=' height :50%；宽度：100%;位置：绝对；z-index :999 ' @ click='活动视频显示(视频。id)'/div 1.5 # # # # #转换当前视频的点击事件：通过编号来判断当前点击的是哪个

活动视频节目(id){ this。视频。筛选器(item={ if(id==item。id){这个。活动视频=项目} })方法二：引用了视频播放器插件（没有视频列表)

相对于内联框架方法写了一堆差异和风格，视频播放器简直精简到起飞

2.1#####第一次用这个插件，不是很熟悉，所以根据官方的应用程序接口写了一个放像机的组件，代码如下：

div video ref=' video player ' class=' video-js '/video/div 2.1-1 # # # # #需要引入视频。射流研究…和定义相关的选择

从“视频。js "-prop : { options : { type : ObJect，default(){ return } } }，data(){ return { player : null } }，mounted(){ this。player=videojs(this)导入视频js .$refs.videoPlayer，this.options，function onplayready(){ console。日志(' onplayeready '，this)})2.2 # # # # # # ##在插入视频的页面中引入上面的放像机组件，在视角层代码如下：

video-player class=' video-player vjs-custom-skin ' ref=' video player ' : playsinline=' false ' : options=' video options ' @ play=' onplaylayer play($ event)' @ pause=' onplayer pause($ event)' @ statecended=' players state changed($ event)'/video-player 2.3 # # #需要引入的插件

"进口"。/././node _ modules/video。js/dist/video-jsCSS“导入”./././node _ modules/vue-视频播放器/src/自定义-主题。CSS“从视频导入视频js”。js '从' vue-video-player '导入{ video player }导入' video js-flash '从' @/components/video player导入video player。vue ' 2.3-1 # # # # #定义相关数据

Props: {state : boolean，}，data(){ return { Video options : {播放速率： [1.0，1.5，2.0]，//播放速度autoplay:false，//如果为true，当浏览器准备就绪时，开始播放Controls : True，Muted :false，//默认情况下，任何音频循环： false都将被消除，//Preload 3360 ' Auto '将循环播放，//如果为FalseAspectRatio:'16:9 '，//计算播放器的动态大小时，使用此值fluid:true，//Scale以适应容器源：[{ src : ' http://VJS.zencdn.net/v/oceans.mp4',类型： '视频/MP4'}]，poster 3360 ' http://vjs.zencdn.net/v/oceans.png',//cover地址notSupportedMessage: '此视频目前无法播放，请稍后再试'，}}}代码地址：https://github.com/yinglichen/videoPlayer

Ps:一个字幕功能是用画布写的，后面需要修复补充。

摘要

以上是边肖介绍的两种基于Vue的视频插入方法的总结，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！