zoukankan      html  css  js  c++  java
  • 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

     

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

  • 相关阅读:
    第六章 (循环结构二)
    MySQL改密码
    第八章
    第二章 变量 数据类型和运算符
    [Windows Phone 7璀璨]北漂1.0在线歌词播放器一.项目搭建及版权声明
    [Windows Phone 7璀璨]北漂1.0在线歌词播放器二.歌曲按艺术家分类实现
    [这不是Windows Phone 7]FitnessTrackerPlus(健身)一.数据库介绍
    [学习笔记]Silverlight4 RIA 开发全程解析[项目全程记录]第二章为站点流行而准备:提供一个可扩展的体系结构(写作中)
    [这不是Windows Phone 7]FitnessTrackerPlus(健身)二.架构搭建
    ERP成本核算
  • 原文地址:https://www.cnblogs.com/fangziffff123/p/6427880.html
Copyright © 2011-2022 走看看