前端临床手札——在微信播放视频的那些事

_Zhao 发布于2019-06-21 16:15 / 1940人阅读

摘要：然而我真的太天真，微信浏览器怎样会让你这样好过问题集中于自动播放视频这块，需求很简单自动播放全屏不显示工具条自动播放一步步来，自动播放这个问题在十分肯定默认是不支持的，必须基于用户操作下才能加载视频。至于在微信下和一个样。

某天收到旧同事的信息说希望我帮手做一下一个简单的H5，然后我看了看的确很简单：

就是图片滚动到最后自动播放视频，播完显示个按钮交互。

然而我真的太天真，微信浏览器怎样会让你这样好过！

问题集中于自动播放视频这块，需求很简单：

自动播放

全屏

不显示工具条

自动播放

一步步来，自动播放这个问题在ios十分肯定默认是不支持的，必须基于用户操作下才能加载视频。至于android在微信下和ios一个样。这个问题其实还不算大，有解决方案：

// 点击页面开始偷偷播视频让其加载
var one = document.body.addEventListener("touchstart", function(){
    var _video = document.querySelector("#vidoe");
    _video.play();
    _video.pause();
    document.body.removeEventListener("touchstart", one);
}, false);

// 然后在其他事件或者行为就能播放那个视频了
var _video = document.querySelector("#vidoe");
_video.play();

代码思维很简单就是用户页面肯定会点的，就第一下点击播放视频，这样算作用户行为而视频实际还没播放，之后在其他需要的地方再弹出播放。从设计上需要花点心思来解决这个硬骨头...

全屏 and 不显示工具条

如果你只需要自动播放，那可以停下了，因为下面更坑。

全屏播放so easy！！

加上x5-video-player-type="h5"让video开启同层H5播放器。

然而在ios设备，还得加上iphone-inline-video这个插件，解决不强制全屏播放问题。以下是使用方法：

# main.js
var enableInlineVideo = require("iphone-inline-video");
enableInlineVideo(document.querySelector("#video"));

# index.html


# index.css
.IIV::-webkit-media-controls-play-button,
.IIV::-webkit-media-controls-start-playback-button {
    opacity: 0;
    pointer-events: none;
    width: 5px;
}

最后加上x5-video-player-fullscreen="true"会让视频进入全屏模式，而全屏默认不显示工具条，好解决！:)

注意：如果和自动播放的方案一起用会出现：偷跑视频时黑屏闪烁一下的问题（就是视频全屏了一下...）。然而打算加载后再设置上面属性也会不成功的，会存在视频流错乱问题（提示你加载出错之类的...）

中间有段小插曲本打算使用canvas进行视频渲染，看似可行结果pc端可以，移动端跪地不起。

结论：

自动播放 —— 完全可行

全屏 —— 可行但需考虑设计细节

不显示工具条 —— 别想了，吃力不讨好（然而目前还没有解决方案，如果有请通知博主感谢）

想要模仿的例子(请用微信打开)
视频H5のVideo标签在微信里的坑和技巧
关于如何在微信里面让video不全屏播放。

GPU云服务器云服务器云服务器那些事什么事web前端开发视频的播放前端技术主要有那些

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/11032.html

前端临床手札——文件上传

摘要：文件上传基本是学习前端路上必定遇到的例子，然而网上能找到的都是单单满足上传这步的案例。但前提是需要约定传入值和返回类型。文件上传基本是学习前端路上必定遇到的例子，然而网上能找到的都是单单满足上传这步的案例。大多文章之所以只说上传这步估计是简单易入门，但是实际工作时就会发现上传文件这个功能上是简单的，逻辑上却比较复杂。先说一下需求和功能点：需求：上传文件到服务器功能：上传单这么...

SexySix 2019-08-19 18:07 评论0 收藏0
前端临床手札——单元测试

摘要：感觉不能这样下去就学写一下单元测试，等他更新代码我都跑一遍确认一下，这样工作安心多了。具体执行的测试用例实现代码。测试工具断言库测试驱动开发及测试框架入门学习最近博主工作是和另一枚后端合作，但是经常发现他写的接口出错，苦逼连连。感觉不能这样下去就学写一下单元测试，等他更新代码我都跑一遍确认一下，这样工作安心多了。经过博主一番查找，貌似被推荐比较多的有mocha和chai，下面记录简...

kid143 2019-08-19 18:17 评论0 收藏0
前端临床手札——单元测试

摘要：感觉不能这样下去就学写一下单元测试，等他更新代码我都跑一遍确认一下，这样工作安心多了。具体执行的测试用例实现代码。测试工具断言库测试驱动开发及测试框架入门学习最近博主工作是和另一枚后端合作，但是经常发现他写的接口出错，苦逼连连。感觉不能这样下去就学写一下单元测试，等他更新代码我都跑一遍确认一下，这样工作安心多了。经过博主一番查找，貌似被推荐比较多的有mocha和chai，下面记录简...

godlong_X 2019-05-29 16:57 评论0 收藏0
前端临床手札——webpack构建逐步解构（上）

摘要：前言由于博主最近又闲下来了，之前觉得的官方文档比较难啃一直放到现在。文章会逐步分析每个处理的用意当然是博主自己的理解，不足之处欢迎指出沟通交流。后续将会补上构建生产的配置分析，案例参考。前端临床手札构建逐步解构下前言由于博主最近又闲下来了，之前觉得webpack的官方文档比较难啃一直放到现在。细心阅读多个webpack配置案例后觉得还是得自己写个手脚架，当然这个案例是基于vue的，...

lowett 2019-08-22 10:36 评论0 收藏0