wex5 教程 之 图文讲解 wex5集成HTML5 视频播放器
来源:互联网 发布:知乎 淘宝办公室零食 编辑:程序博客网 时间:2024/05/24 11:15
随着视频播放器的制作需要,基于wex5的开源框架和遵循DOM规范的特性,对html5原生组件进行改装,配合attchmentsimple组件,实现web页面的视频上传与在线播放。
演示工程:http://play-app.cloudx5.com
演示效果图:
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 或者优酷视频:http://v.youku.com/v_show/id_XMTc4NDAyMTY4OA==.html
- wex5 教程 之 图文讲解 wex5集成HTML5 视频播放器
- wex5 教程 之 图文讲解 视频快照与本地存储
- wex5 教程 之 图文讲解 登陆,注册,页面跳转
- wex5 教程 之 图文讲解 后台管理界面设计与技巧
- wex5 教程之 图文讲解 Cloudx5一键部署
- wex5 教程之 图文讲解 文件上传attachmentSimple(1)
- wex5 教程 之 图文讲解 头像裁剪与上传
- wex5 教程 之 图文讲解 拾色器的妙用
- wex5 教程 之 图文讲解 考题模块框架设计
- wex5 教程 之 图文讲解 登陆,注册,页面跳转
- wex5 教程 之 图文讲解 智能数据库设计 之(1) 触发器
- wex5 教程 之 图文讲解 bind-css和bind-sytle的异同
- wex5 教程 之 图文讲解 可观察对象的集群应用与绑定技术
- wex5 教程 之 图文讲解 全局可观察变量与登陆状态全局控制
- wex5
- WeX5
- WeX5
- WeX5之Data插入
- 详解CvScalar类型
- springmvc(1)----框架处理流程
- Windows下C语言的Socket编程例子(TCP和UDP)
- Oracle的练习与优化
- qwdqw
- wex5 教程 之 图文讲解 wex5集成HTML5 视频播放器
- c#十二章上机
- 获取屏幕尺寸
- Win10下通过Gem安装Sass(最新)
- django安装报ImportError: No module named setuptools解决方法
- MFC 自定义消息四步曲与在参数中传递变量
- Android ListView上下滑动与item左右滑动冲突解决
- gpio_request分析
- java并发编程----并发模型