使用 video.js 在 ios 上播放视频内联？
Posted
技术标签:
【中文标题】使用 video.js 在 ios 上播放视频内联？【英文标题】：Using video.js to play video inline on ios? 【发布时间】：2016-03-13 22:47:18 【问题描述】：我正在尝试使用 video.js 在所有平台上保持一致的视频皮肤。下面的代码适用于所有东西（chrome、firefox、ie、android），但 ios 上的 safari（尚未测试 safari 的桌面版本）。当尝试播放视频时，ios 会跳转到它的默认视频播放器（快速时间？）。这是一个问题，因为我希望从皮肤中删除视频控件，以便用户必须观看视频。有没有办法使用 video.js 或其他网络插件来在所有平台上拥有一致的视频播放器 UI，或者这对于 ios 来说是不可能的？
<html>
<head>
<!--#include virtual="/assets/inc/headcontent.htm" -->
<link href="http://vjs.zencdn.net/5.3.0/video-js.css" rel="stylesheet">
<!-- If you'd like to support IE8 -->
<script src="http://vjs.zencdn.net/ie8/1.1.0/videojs-ie8.min.js"></script>
</head>
<body>
<div class="row">
<div class="col-xs-12 col-md-10 col-lg-8">
<div class="">
<video id="the_video" class="video-js" controls preload="auto">
<source src="videos/english.mp4" type='video/mp4'>
<p class="vjs-no-js">
To view this video please enable javascript, and consider upgrading to a web browser that
<a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
</p>
</video>
</div>
</div>
</div>
<!--#include virtual="/assets/inc/footcontent.htm" -->
<script src="http://vjs.zencdn.net/5.3.0/video.js"></script>
<script>
var player = videojs("the_video", , function()
// Player (this) is initialized and ready.
).ready(function()
console.log(this.options()); //log all of the default videojs options
// Store the video object
var myPlayer = this, id = myPlayer.id();
// Make up an aspect ratio
var aspectRatio = 264/640;
function resizeVideoJS()
var width = document.getElementById(id).parentElement.offsetWidth;
myPlayer.width(width).height( width * aspectRatio );
// Initialize resizeVideoJS()
resizeVideoJS();
// Then on resize call resizeVideoJS()
window.onresize = resizeVideoJS;
);
</script>
</body>
</html>
【问题讨论】：
【参考方案1】：从 iOS 9 及更高版本开始，您现在可以将 playsinline 属性添加到视频标签以使其内联播放。 https://webkit.org/blog/6784/new-video-policies-for-ios/ 我刚刚测试过，它适用于 video.js
<video class="video-js" poster="#" playsinline autoplay loop>
<source src="#" type="video/mp4">
</video>
【讨论】：
ZOMG！你不知道这让我难过多少天。哎。非常感谢。【参考方案2】：这很烦人，但 iOS 仍然不允许在 iPhone 上内联播放视频元素。正如this question 的答案中提到的那样，有些人试图在画布元素中播放视频。
【讨论】：
以上是关于使用 video.js 在 ios 上播放视频内联？的主要内容，如果未能解决你的问题，请参考以下文章