Question

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

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

视频播放完毕后，我想隐藏全屏视频并再次向用户显示网页，而不向用户显示已暂停/已完成的视频区域。有没有办法做到这一点？

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

Answer 1

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

首先添加链接和video对象。我们会隐藏视频，因此无法显示预览缩略图。该链接将调用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对象的播放，并且还会向＆＃34;视频结束＆＃34;添加处理程序。事件，以便我们可以在视频结束时自动关闭视频：

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上的链接播放全屏视频

1 个答案: