前端两种播放视频的方式

两种方式，需要弹窗的话，可以结合layer使用

<html><head><script src="vue.js"></script><style type="text/css">video{width: auto;max-height: 100%}</style></head><body><!--第一种 引入视频链接 --><div id="app" style="width: 500px;height: 400px" align="center"><video controls><source src="http://oss2.lanlanlife.com/2%E9%82%80%E8%AF%B7%E5%A5%BD%E5%8F%8B.mp4" type="video/mp4"></source></video></div><!--第二种 嵌入iframe 播放外部视频 --><div style="width: 500px;height: 400px" align="center"><iframe height=498 width=510 src='http://player.youku.com/embed/XNDExMDIyMDg5Ng==' frameborder=0 'allowfullscreen'></iframe></div><script></script></body>
</html>

视频操作（很有意思）：

<videoid="videoSrc"preload="metadata":src="/"muted @mousedown.stop='mouseDown($event)'@mouseup.stop='mouseMove'@touchstart.stop='touchDown($event)'@touchend.stop='touchMove($event)'
/>
this.videoObj = document.getElementById('videoSrc')
beforeRouteEnter(to, from, next) {next(vm=> {vm.$nextTick(()=>{let videoObj=vm.videoObj;videoObj.currentTime = 0;videoObj.play()videoObj.pause()video.addEventListener('timeupdate',()=> {videoObj.currentTime = 10.5;})})})
}

前端两种播放视频的方式相关推荐

unity3d两种播放视频的方式
在Unity3D中播放游戏视频的方式有两种.第一种是在游戏对象中播放,就好比在游戏世界中创建一个Plane面对象,摄像机直直的照射在这个面上.第二种是在GUI层面上播放视频.播放视频其实和贴图非常相像 ...
二阶段补充：文件上传服务端处理，后端文件上传、前端两种文件上传方式
1.文件上传 2.后端文件上传两种方案: 兼容性较好的commons-fileupload,支持所有版本的Servlet,即所有版本的Tomcat 优点: 兼容性缺点需要外部jar,比较麻烦.代 ...
Android三种播放视频的方式
分类: Android多媒体(12) Android应用层(93) 版权声明:本文为博主原创文章,未经博主允许不得转载. 在Android中,我们有三种方式来实现视频的播放: 1.使用其自带的播 ...
android通过点击播放视频,Android三种播放视频的方式
在Android中,我们有三种方式来实现视频的播放: 1.使用其自带的播放器.指定Action为ACTION_VIEW,Data为Uri,Type为其MIME类型. 2.使用VideoView来播放. ...
在计算机系统中有两种不同的图像编码方式,第二章计算机系统与计算原理.ppt...
第二章计算机系统与计算原理大学计算机基础 * 信息表示与处理 ----西文字符 ASCII 码是美国信息交换标准代码(American Standard Code for Information I ...
两种获取connectionString的方式
两种获取connectionString的方式 1. public static string connectionString = ConfigurationManager.ConnectionSt ...
Hibernate中两种获取Session的方式
转自:https://www.jb51.net/article/130309.htm Session:是应用程序与数据库之间的一个会话,是hibernate运作的中心,持久层操作的基础.对象的生命周期 ...
TF之RNN：TF的RNN中的常用的两种定义scope的方式get_variable和Variable
TF之RNN:TF的RNN中的常用的两种定义scope的方式get_variable和Variable 目录输出结果代码设计输出结果代码设计 # tensorflow中的两种定义scope(命 ...
python用outlook自动发邮件_python使用两种发邮件的方式smtp和outlook示例
smtp是直接调用163邮箱的smtp服务器,需要在163邮箱中设置一下.outlook发送就是Python直接调用win32方式.调用程序outlook直接发送邮件. import win32com ...
oracle单列转行,oracle 两种列转行的方式
oracle两种列转行的方式 select baseItem.SUIT_TO, wmsys.wm_concat(to_char(dict.DICT_VALUE)) as dicv from T_ST ...

前端两种播放视频的方式

前端两种播放视频的方式相关推荐

最新文章

热门文章