在 iOS Safari 上从 link 播放全屏视频

Question

当用户点击 link 时，我想在 iPhone 中使用全屏播放器播放 .mp4 视频，例如：

<a href="http://www.example.com/video.mp4">Play the video</a>

视频结束后，我想隐藏全屏视频并再次向用户显示网页，而不向用户显示暂停/结束视频区域。有什么办法吗？

我已经尝试了 HTML5 <video> 元素（退出全屏模式时显示视频区域）和直接 link（必须在浏览器中返回 return 网页）。有什么想法吗？

Answer 1

我认为使用 HTML5 <video> 绝对是可行的方法，但使用一些调整..

首先添加一个 link 和一个 video 对象。我们将隐藏视频，这样它就不会显示预览缩略图。 link 将调用 JavaScript 函数：

<a href="javascript:playVideo();">Play the video</a>
<video id="video-player" style="display:none !important;">
    <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
</video>

JavaScript 部分将触发 video 对象上的播放，并且还将向 "video ended" 事件添加一个处理程序，以便我们可以在视频结束时自动关闭视频：

function playVideo() {
  var videoPlayer = document.getElementById('video-player');
  videoPlayer.addEventListener('ended', onVideoEnded, false);
  videoPlayer.play();
}

function onVideoEnded(event) {
  var videoPlayer = document.getElementById('video-player');
  videoPlayer.webkitExitFullscreen();
}

在 iOS Safari 上从 link 播放全屏视频

Play fullscreen video from a link on iOS Safari

html

mobile-safari

html5-video

ios