wex5 教程 之 图文讲解 wex5集成HTML5 视频播放器

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

        

        演示效果图：

       1.上传封面图，视频

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

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

  

 

 一  设计思路：

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

二 video标签封装：

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

     

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

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

                    2.src属性为视频源，不能添加自定义属性，否则不能动态用变量赋给视频地址；

                    3.视频格式，经测试webm没有问题，所以用转换工具全部将视频转换成webm格式。毕竟提前花时间比浏览器渲染要划算。

                    4.muted静音和volume不起作用。

三 代码逻辑与实现

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

          

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

         

             注意事项：1。接收后的参数重新装入data组件，便于利用wex5其它组件的绑定优势。

                               2.。接收参数后立即执行function方法，不能在modeload中执行，实测数据数收在modeload之后，将取到空值。

                              3 。player.setAttribute方法为属性设置，格式为("",""),变量从data中取出后进行了字符串拼接。

       3 播放.数据清零。

       

        4.播放器样式：

           h5播放器有很多不错的js文件，可以直接把css样式拿来，拼装，实现更丰富的效果。或者在wex5的框架时自已制作。

             player.play()

             player.pause()

            player.stop()

            调用播放器实例，可以实现控制，及相关时长，进步，大小，等属性的获取。

             至此，h5 web播放器已经重新组装完成，开始完美的web播放吧。经测试，用attchmentsimple上传后的视频完美播放。关于上传，请看我的另一篇博文:http://blog.csdn.net/qq_27727681/article/details/53130105  

相关视频制作完成，上传优酷。教学app制作中。我是邯郸戏曲开发，tel：15175073123,qq:1017945251

 

 

 扫描二维码，看高清教学视频。