zhengx

搜狗百科h5 video实践

1

## 导语 此篇文章，主要是总结我在搜狗立懂百科无线视频播放器开发项目中遇到的一些坑。video标签虽然早就已经被各大浏览器支持，但在实践中浏览器的表现却并不能与标准一致，一些奇怪的表现真的令人抓狂，需要开发者不断摸索，做到更好的用户体验。本文从以下几点介绍开发中遇到一些坑： * 浏览器劫持问题 * 自动播放与连续播放 * 全屏与伪全屏 * html5video标准踩坑指南 ## 浏览器劫持问题 最初进行无线视频开发都会发现一个问题 比如在[https://www.zhihu.com/question/27472010]()提到的这个问题，在uc，qq以及一些手机自带浏览器中，无论怎么调节z-index，页面上的dom元素都不会高过video的层级。这并不是浏览器关于的层级的兼容bug，而是浏览器有意为之，此时显示的视频，是浏览器用native层级进行显示的视频，有些浏览器甚至可以在暂停状态下看到广告。。。 显然页面上所有的交互的操作如果和视频显示范围有重合，一定会在视频层级之下。 ### **解决办法：** ### 上策：获得浏览器厂商的白名单 也许你会发现，为什么专业的视频网站和一些大厂他们的h5播放体验完全没有这种问题，视频上方甚至可以做各种交互，这样的网站显然拥有浏览器的白名单，浏览器不会劫持视频，完全按照html5标准解析页面。（话说浏览器不就应该按标准解析网页么。。。） 建议尽量获取到项目中用户量最大的浏览器的白名单，本文后续提到的一些问题也有因为浏览器劫持引起的，这会大大降低开发量，体验也会更好。 ### 中策：进入二级页播放，避免交互 当然获取全部浏览器的白名单非常有难度，如果不是一定要在视频浮层上进行交互，比如点击按钮下拉二级菜单遮挡video，可以考虑进入新的没有浮层交互的二级进行播放（单页面，iframe），在设计阶段就避免一系列奇怪的bug，比如优酷进入二级页播放。  ### 下策：兼容方案 如果既无法获取到浏览器的白名单，设计又不能改，只能想办法兼容，尽量提高用户体验。基本方法是： 1.用户点击视频外交互操作时，暂停视频。...

###wenke-dev中webpack-middleware与vue热替换实践 模块热替换是webpack提供的最有用的功能之一，对于vue来说，由vue-cli生成的脚手架工具展示了如何使用webpack-dev-server实现热替换，但是对于前后端没有分离的业务或者有自己定制的打包工具，基于webpack-middleware定制热加载方案更加方便。 对于一般的热替换js代码，业务代码需要侵入一部分代码以实现模块的热替换。如 ``` import _ from 'lodash'; import printMe from './print.js'; function component() { var element = document.createElement('div'); var btn = document.createElement('button'); element.innerHTML = _.join(['Hello', 'webpack'], ' '); btn.innerHTML...