WeX5集成HTML5 视频播放器

着视频播放器的制作需要,基于wex5的开源框架和遵循DOM规范的特性,对html5原生组件进行改装,配合attchmentsimple组件,实现web页面的视频上传与在线播放。 演示效果图: 1.上传封面图,视频

2 点击封面图,跳转至播放页面。

www.wex5.com

3.进入播放页面,实时播放。

一 设计思路:

wex5与框架与html不同,把标签源码,js,css,视频操作进行了分离,那我们就以html5的标签,js,css分离后,在wex5的基咄上重新组装,实现wex5与js逻辑的混用与配合。 二 video标签封装:

如下图所示,插入video标签,及相关属性描述。

添加之后,在视图区出现自定义属性,id必须给值。其它相关属性均强参照html5标签。没有的属性都可以在js中重新进行设置。

www.wex5.com

注意:1.实际测试中,autoplay自动播放,为空不能自动播放,只要有值,不管任何值,都会自动播放;

2.src属性为视频源,不能添加自定义属性,否则不能动态用变量赋给视频地址; 3.视频格式,经测试webm没有问题,所以用转换工具全部将视频转换成webm格式。毕竟提前花时间比浏览器渲染要划算。 4.muted静音和volume不起作用。 三 代码逻辑与实现

1.用wex5的shell跳转页面并传参

2.播放器页面,接收参数

www.wex5.com

联系客服:779662525#qq.com(#替换为@) 苏ICP备20003344号-4