在新版的HTML5标准中,网页的元素将会有直接支持流媒体播放的功能,而不需要像flash或者silverlight那样的扩展形式来支持观看视频的需求,但是一个标准的实施毕竟是一件浩大的工程,也不是一朝一夕能够改变的,目前大多数视频播放器仍然以flash等插件为主,但是随着科技的潮流发展这些终将被HTML5所取代(苹果已经决定在自己的手机中禁止flash等富媒体播放器的运行),因为这些播放器不仅占用较多的计算机资源,还会给用户的浏览器使用安全带来一些隐患(细心的小伙伴可能经常会看到一些安全软件发布这些播放器的漏洞补丁)。
HTML5作为新一代流媒体播放器的实现,其功能不仅强大而且相当灵活,网站设计者可以利用这些现代化的播放元素设计出更加符合用户要求,更加人性化的网页来满足人们更多的需求。
今天给大家介绍的这款插件HTML5ify就是可以把一些网站中的普通播放器如:flash播放器等转换成HTML5的播放器,如果用户需要使用更多个性化的操作,可能你必须要这么做,比如如果用户需要使用一款个性化的声音调节插件:谷歌浏览器控制声音插件:Audio EQ,用户就需要在不支持HTML5播放器或网站中的视频仍然使用flash、silverlight等播放器的时候使用HTML5ify插件把它们转换成标准的HTML5插件。同时这款HTML5ify插件的盛行也会带动一个新标准的健康发展,使得用户的操作体验变得越来越好。
2015-2016前端知识体系
总结了下前端这两年的主流技术,大部分技术在我的博客里有较深入的研究学习,对应技 ,博客持续更新中,欢迎大家关注~
一、框架与组件
bootstrap等UI框架设计与实现
伸缩布局:grid网格布局
基础UI样式:元素reset、按钮、图片、菜单、表单
组件UI样式:按钮组、字体图标、下拉菜单、输入框组、导航组、面包屑、分页、标签、轮播、弹出框、列表、多媒体、警告
响应式布局:布局、结构、样式、媒体、javascript响应式
第三方插件:插件管理
jQuery、zepto使用原理以及插件开发
支持amd、cmd、全局变量的模块化封装
$.fn.method = function(){}
mvc/mvvm框架原理设计,vue/angular/avalon等
directive设计:html、text、class、html、attr、repeat、ref,可扩展
filter设计:bool、upperCase、lowerCase,可扩展
表达式设计:if-else等实现
viewmodel结构设计:例如数据,元素,方法的挂载与作用域
数据更变检测:函数触发,脏数据检测、对象hijacking
polymer/angular2思想与设计思路
import技术
template和script引入方式
css样式命名空间隔离
简单复用第三方库
reactjs原理与使用
virtual dom单向数据绑定
js执行语法方式
UI由状态控制
commonJS/AMD/CMD
模块引入
模块定义
模块标识
UMD解决不同规范兼容性的问题,例如webpack封装
模块懒执行(CMD)与与预执行(AMD)
loadJs模块化加载原理与实现
创建script标签,需要id映射到资源url
onload加载模块队列判断
全部加载完成后触发
加载失败问题优化
requirejs、modjs、seajs
polyfill、shim原理与实现
polyfill提供了开发者们希望浏览器原生提供支持的功能特性
shim将新的API引入到旧的环境中,且仅靠旧环境中已有的手段实现
virtual Dom、Incremental DOM
1.用js对象树表示dom树结构,根据该对象树构建dom树
2.状态改变时,重新构建对象,和旧的对象对比,记录两个对象树差异
3.将对象树差异应用到dom中
小结:js对象模拟dom(elem.js),virtual dom diff算法(diff.js)、差异渲染dom(patch.js)
incremental dom在状态改变时扫描旧对象树将差异直接应用到dom中
shadow dom
隔离外部环境用于封装组件:结构、样式、行为
实现形式:新标签、class类属性 + 构建编译
webwork与service Worker
webwork与主线程机制,on/post
serviceworker可作为浏览器请求代理
应用场景
方法/步骤
1、在百度中搜索引擎中输入:Wallaby下载,出现如图选择一个链接进行下载。
2、下载完成后,双击安装软件,跟着安装向导的指示来装。
3、装好后双击桌面的Wallaby软件,运行程序。
4、出现如图界面,点击Browse按钮,选择已经做好的flash源文件,后缀名为.fla格式。
5、导入fla源文件后,点击Convert按钮,并选择转换到哪个目录下,然后点击确定进行转换。
6、如图是转换过程。Status是转换状态。
7、直到Status显示conversion successful,说明转换成功,到保存的目录下即可查看转换成功的html格式的文件。