最近在做一个hmlt5的课件项目,客户需要在课件中嵌入HTML5视频,还需要自定义视频的一些控制,默认的视频控制条肯定不能满足,于是需要引入自定义的视频控件。
经过一番研究,最后选定了mediaelement这个插件,号称还是挺强的,而且支持的平台比较多。
引入了,首先需要解决的问题是整合问题,它是基于jquery的,我们现在用的包是zepto,虽然号称是通用的,但是用起来就知道区别了。
首先我们自己build的包,发现一些selector的匹配方法不支持,原来selector的包没有build进来,于是又把selector,build进类库里。
又解决了一些兼容性问题,这个lib总算可以正常运行起来了,用一个简单例子测试,感觉蛮好。
放到真正的课件里发现问题了,发现好多按钮都是错位的,经过一番研究发现了问题。视频是通过动画效果出来的,为了动画的效果,视频开始时隐藏的,在获取视频的高度和宽度都没有,造成了位置计算的错误。为了解决这个问题,让动画执行结束之后增加一个回调,在回调里重新计算一下所有按钮的位置,搞定!
解决了这个问题接下来弄一些控制的定制,这个还算顺利,因为大部分的控制功能都是可定制的,只有一个进度条的拖动的可定制功能没有,自己加了参数的接口。
各个浏览器试了一下,基本没啥问题,总算出了一口气,但是还不能高兴太早,还要试试手机上,因为手机上往往是出问题最多的。
果然不出所料,手机上确实问题不少,首先是定位的问题,手机上的课件都是缩放过的,通过zepto的height和width方法得到的也都是缩放过的尺寸,都怪该死的getBoundingClientRect方法,不知道jquery里是不是用的这个方法了处理的。为了避免这个问题,使用了offsetHeight和offsetWidth来代替这两个方法,一试,果然奏效了。
目前还有好多问题在解决中,android设备chrome浏览器,视频对fixed的熟悉竟然不支持,外层div定位过去了,视频还在原处,天哪!
有时候做移动webapp的开发真的挺苦逼的,各种平台,各种浏览器。关键是客户还不理解,有些事情跟他说不通,好吧,我承认我是来发牢骚的。主要是希望大家能理解,也希望有相同经历的朋友一起交流,一起解决苦逼bug,一起交流心得。如果你想体验下,我可以转给你些项目试试,我qq398906783
分享到:
相关推荐
HTML 无插件播放 RTSP 流媒体解决方案
MuiPlayer 是一款 HTML5 视频播放插件,其默认配置了精美可操作的的播放控件,涉及了常用的播放场景,例如全屏播放、播放快进、循环播放、音量调节等功能。支持 mp4、m3u8、flv 等多种媒体格式播放,解决大部分兼容...
一款极好用的HTML5 视频播放器代码,风格设计简洁,调用安装方便,自带HTML调用实例,有一个小的测试视频可让你很好的看到效果,代码采用jsPlayer、juqery和dtooltip-min三个封装插件完成,兼容性也很不错。
阻止自动播放HTML5 <...https://github.com/Eloston/disable-html5-autoplay/issues从1.2版开始,我们重写了所有代码并解决了大多数主要问题,如果有任何新的错误/问题,请给我们反馈。 享受 :) 支持语言:English
前端使用了很多jQuery和HTML5的插件和库,实现多视图、拖拽、图表、视频等特性以及对老版本浏览器的支持。 很好的展示了HTML5+js+CSS的客户端解决方案。 虽然与Silverlight等基于浏览器插件的解决方案相比,未免显得...
MuiPlayer 是一款 HTML5 视频播放插件,其默认配置了精美可操作的的播放控件,涉及了常用的播放场景,例如全屏播放、播放快进、循环播放、音量调节等功能。支持 mp4、m3u8、flv 等多种媒体格式播放,解决大部分兼容...
在过去 flash 是网页上最好的解决视频的方法,截至到目前还算是主流,像那些优酷之类的视频网站、虾米那样的在线音乐网站,仍然使用 flash 来提供播放服务。但是这种状况将会随着 HTML5 的发展而改变。就视频而言,...
Trapcode Particular是视频处理必备的一款后期插件,用于制作真实的3D特效,非常强大专业。此版Trapcode Particular插件支持AE CC 2017及更高版本。安装教程:https://mac.orsoon.com/Mac/166361.html 遇到安装包...
没有多余插件
jwplayer包为自己制作的视频插件,可以上传视频并可以播放,支持视频截图。但是编辑时出现问题……大神们可自行解决 flash包为在ckeditor自带的flash插件的基础之上修改,可以上传,播放,编辑也没有问题。还不支持...
海康提供了vue实现插件播放视频的实例,但是在很多情况下需要在静态HTML项目中进行视频的播放。本demo就是解决这个问题的
早期,诸如HTML之类的本地Web技术无法将视频和音频嵌入到Web中,因此专有的(或基于插件的)技术(如Flash)以及后来的Silverlight(现在都已淘汰)因处理此类内容而变得流行。 这种技术行之有效,但存在许多问题,...
1.本插件需要FrameWork 2.0或更高版本的支持,如果您没有安装FrameWork 2.0,请先安装FrameWork 2.0。 FrameWork 2.0下载地址: ...4.如果无法观看视频帮助,请依照帮助文档已知问题页内列出的方法解决。
插件下载地址:html2canvas下载地址 使用方式 项目使用的react组件开发方式。参照官方的说明文档getting-started.md,按照以下步骤进行: 1、使用以下命令安装 npm install html2canvas --save 2、在文件中引入...
实测可用,分享一下,资源如下:1.在线播放视频链接地址;2.项目中前端浏览器页面播放h264、h265编码的flv直播或mp4视频;3.解决网页H265格式视频播放,提供插件github地址,实测可用。
-添加按钮以下载vidoe-现在它支持GIF和一些简单的视频,但不支持带声音的视频(.TS扩展名),我将在了解如何工作后添加视频Twitter视频工作(正在进行中)Update 1.3.7.4-将TS设置为默认下载,因为MP4无法下载。解决...
将工具注入到视频页面中,解决跨域问题。 3.重新下载错误片段:当部分视频片段下载失败时,点击该按钮,重新下载错误片段。 4.强制下载现有片段:将已经下载好的视频片段强制整合下载。可以提前观看已经下载的片段。...
然而,由于HTML5的W3C标准规范还未制定,安卓系统中类浏览器Webview自身存在一些局限性,因此仍存在着诸多问题亟需解决,包括:(1)多窗口类浏览器模式问题。安卓上用于加载的Webview视图窗口只是作为类浏览器而...
玩耍、专注、联系、分享和自由 :triangular_flag: |介绍MuiPlayer是一款HTML5视频播放插件,默认配置了精美可操作的播放控件,涉及常见的播放场景,如全屏播放、播放快进、循环播放、音量调节、视频解码等功能。...