标签：ipad html5-video fullscreen ios javascript

我有一个简单的视频标签：

<video id="video-1" poster="img/video/poster-1.jpg" preload="none">
  <source src="http://player.vimeo.com/external/the_video-id" type="video/mp4">
</video>

我通过javascript按钮播放

$('[data-play-video]').click(function(){
  var video_id = $(this).data('playVideo');
  var video_control = $(video_id)[0];
  video_control.play();
});

该视频可以在桌面和iPhone的全屏播放器中内联播放.在iPad上,它可以内联播放,但我希望它在默认的iOS视频播放器中以iPhone一样的全屏播放.我该如何实现？

我知道webkit-playsinline属性可用于强制视频在iPhone上内联播放. (HTML5 inline video on iPhone vs iPad/Browser)和(Can I avoid the native fullscreen video player with HTML5 on iPhone or android?)

但是,我要相反：在所有iOS和Android设备上以默认的iPhone全屏格式播放视频.

解决方法:

您可以使用webkitEnterFullscreen()方法.

    var vid;

    function init() {

        vid = document.getElementById("myVideo");

        vid.addEventListener("loadedmetadata", addFullscreenButton, false);

    }

    function addFullscreenButton() {

        if (vid.webkitSupportsFullscreen) {

            var fs = document.getElementById("fs");

            fs.style.visibility = "visible";

        }

    }

    function goFullscreen() {

        vid.webkitEnterFullscreen();

    }

标签：ipad,html5-video,fullscreen,ios,javascript
来源： https://codeday.me/bug/20191028/1953000.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。