在移动端 Web 开发中，iOS 上经常会遇到的一个问题是内置的 Video 播放器不能够在页面中自动播放。因为 Safari 的策略是只能在用户交互的情况下才能播放视频，否则会被自动阻止。这个问题已经困扰了无数开发者很长时间。不过好在社区有一些解决方案出现，其中一个就是 npm 包 iphone-inline-video，它可以让 iOS 设备上的内置 Video 播放器支持自动播放。在本文中，我们将介绍如何安装和使用这个 npm 包。
安装
在终端中运行以下命令进行安装：
npm install iphone-inline-video --save
这将会自动将 iphone-inline-video 包下载到你的本地项目中，并且在 package.json 文件的 dependencies 中添加一条记录。
使用
- 在页面中引入
iphone-inline-video的核心 JS 文件：
<script src="./node_modules/iphone-inline-video/iphone-inline-video.min.js"></script>
- 在加载视频之前，先使用 iiv 初始化视频：
const video = document.getElementById('my_video');
const iiv = new window.InlineVideo(video);这里假设你已经有了一个 id 为 my_video 的 video 标签，如果没有可以先创建一个。InlineVideo 类接受一个 video DOM 节点作为参数，这个 DOM 节点中应该包含你想要播放的视频的基本信息，比如 src 和 poster 等。
- 监听 iiv 实例的
canplaythrough事件，当视频可以播放时自动播放视频：
iiv.on('canplaythrough', () => {
iiv.play();
});这里使用了 on 方法来监听事件，比较推荐。但也可以使用标准的 addEventListener 方法。
- 最后，如果需要，你还可以监听 iiv 实例的其他事件，比如播放结束等等。
iiv.on('ended', () => {
console.log('视频播放结束！');
});示例代码
下面是一个完整的使用 iphone-inline-video 包的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----------------------------------------
-------
------
------ ------------- -------- ------------------- -------------------------------
------- -----------------------------------------------------------------------------
--------
----- ----- - ------------------------------------
----- --- - --- --------------------------
-- -- -------------- -----------
------------------------ -- -- -
-----------
---
-- -- ----- ------------
--------------- -- -- -
-----------------------
---
---------
-------
-------总结
iphone-inline-video 是一个非常好用的 npm 包，它可以帮助我们绕过 iOS 上内置 Video 播放器自动播放的限制。如果你也遇到了类似的问题，可以尝试使用这个库解决。不过需要注意的是，由于逃过这些限制可能会影响到用户体验，因此你需要仔细权衡利弊，并根据具体情况来决定是否使用 iphone-inline-video。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedca78b5cbfe1ea0612414