H5 video在IOS微信上无法自动播放

一、ios上无法自动播放（autoplay 是失效的）原因：

移动端为了避免浪费用户的流量，默认video是不能够自动播放的，即使加了autoplay属性，也只能实现在PC端自动播放，在移动端依旧不能自动播放。

二、网上探索解决办法：

方法1、网上好多帖子的解决办法是监听微信的WeixinJSBridgeReady

但是我用了后还是没就解决，还是没有自己播放。此方法行不通。

2、利用微信js解决。

首先需要引入

然后

最后，try it ! 竟然成功了，进入页面视频自动播放了，哦耶！此方法可行！

方法二：

引入微信jssdk，<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

此方法也可行！

我们使用html5的video标签，可以不依赖于任何第三方的插件或控件，直接在浏览器中实现视频播放功能。

在了解了video标签之后，下面我们就使用html5的video标签来实现视频播放。

现在，我们打开浏览器，看一看具体的效果：

为了更好地兼容各种浏览器，你可以为一个video标签添加多个source子标签，每个source标签引用一个不同格式的视频文件。这样，html5浏览器会自动在这些source标签中从上到下依次寻找并识别出该浏览器可以播放的第一个视频文件并进行播放，从而实现兼容多个浏览器的视频播放功能。

注：html5的video标签目前只支持播放.mp4、.ogg、.webm等几种格式的视频文件，暂不支持其他格式的视频文件。此外，不同的html5浏览器支持的视频文件格式也略有不同，这种状况可能会在未来的html5中得以改善。

功能模块概述

通过obs客户端推流到nginx流媒体服务器上，对流媒体用ffmpeg将流剪切为若干段ts流文件并保存到临时目录中，通过访问m3u8格式拼接ts流文件段来观看直播。

推流端

采用开源工具OBS客户端进行推流

根据项目的推流地址，填入OBS客户端（下载地址）中，并设置场景，保存后重启，便可开始推流。

为更加稳定的推流，建议使用以上链接中的v0.625稳定版本，按提示安装完成后，打开设定.在广播设定中，伺服器统一填写我们项目的流媒体接收流地址：

rtmp://127.0.0.1:1935/hls/

以上这几个数据都是可以更改的。

127.0.0.1——你的流媒体服务器ip

1935——你的rtmp端口号

hls——你的直播nginx配置模块

具体在下文中也有详细介绍

配置地址

回到主界面，右键来源，选择添加视频捕捉设备或获取窗口等（相关设置默认即可），点击开始串流，便可开始直播。

添加场景

图为添加视频捕捉设备后的直播画面：

直播中

流媒体服务器

Nginx接收推流模块

rtmp_auto_push on

rtmp {

server {

listen 1935

application hls {

live on

hls on

hls_path /tmp/hls

on_publish 项目地址/liveOnPublish

on_publish_done 项目地址/liveOnDone

notify_method get

}

}

}

配上我在word上的注解

注解1

Nginx处理直播流模块

http {

server {

listen 80

server_name localhost

location /hls {

secure_link $arg_st,$arg_e

secure_link_md5 key$arg_e

subs_filter .ts '.ts?st=$arg_st&e=$arg_e&clentip=$remote_addr'

subs_filter_types application/vnd.apple.mpegurl

if ($secure_link = "") {

return 402

}

if ($secure_link = "0") {

return 403

}

# Serve HLS fragments

types {

application/vnd.apple.mpegurl m3u8

video/mp2t ts

}

root /tmp

add_header Cache-Control no-cache

}

}

}

注解2

项目部署服务器

流媒体服务器不通过项目服务器，整个直播过程的推流和处理流都在流媒体服务器上进行。项目服务器主要进行直播地址加密处理意见推流开始和结束触发的方法（liveOnPublish()，liveOnDone()）已及对直播地址加密.

播放端

直接通过HTML5中的<video>标签设置src来播放直播流。如：

<video src="pro/live.m3u8?st=UM/L8jdfTlY2b1j1F6XSxA==&e=1468548530

" controls="controls"></video>

存在的问题

延迟待测试（不科学的数据是安卓手机普遍在30-40s，苹果手机在20-30s）

并发待测试

掉帧待测试（网速影响大，网络好几乎不掉帧，网络差掉一半，用户体验差）

---