41

连续几天都在为这个问题苦苦挣扎……

是否有任何方法或“破解”来禁用在 iPhone 上的 Safari 上全屏播放视频。当然，我已经尝试过 'webkit-playsinline' 属性，但这仅适用于您自己的应用程序。

看：

<video class="" poster="" webkit-playsinline>
    <source src="" type="video/ogg" preload="auto">
    <source src="" type="video/mp4" preload="auto">                
</video>

我也尝试将视频放在画布上，但由于它看起来视频作为画布 drawImage() 方法的来源，目前在 iOS 上不受支持。

我可以使用其他方法或替代技术吗？还是我这几天真的浪费了时间？

4

4 回答 4

50

在 iOS 10+

Apple 终于playsinline在 iOS 10 的所有浏览器中启用了该属性，因此这将无缝运行：

<video src="file.mp4" playsinline>

在 iOS 8 和 iOS 9 中

您可以通过浏览视频而不是实际播放视频来模拟播放来解决此问题.play()。

简而言之，使用iphone-inline-video，它负责播放和音频同步（如果有的话），并保持<video>正常工作。

于 2016-04-01T05:26:31.367 回答
17 
    <div id="video-player">
        <video src="http://movies.apple.com/media/us/html5/showcase/2011/demos/apple-html5-demo-tron-us_848x352.m4v"></video>
        <p><a href="javascript:playPause();">Play/Pause</a></p>
   </div>

   <script type="text/javascript">
        // intercept and cancel requests for the context menu
        var myVideo = document.querySelector('video');
        myVideo.addEventListener("contextmenu", function (e) { e.preventDefault(); e.stopPropagation(); }, false);

        // hide the controls if they're visible
        if (myVideo.hasAttribute("controls")) {
            myVideo.removeAttribute("controls")   
        }

        // play/pause functionality
        function playPause() {
            if (myVideo.paused)
                myVideo.play();
            else
                myVideo.pause();
         }

         // essentially you'll have to build your own controls ui
         // for position, audio, etc.

    </script>

The idea is to:

  1. Prevent the user getting to the context menu (to show the controls)
  2. Hide any player controls that might be visible

The downside is that you have to implement your own player UI - but it's not too complicated

*This code is only intended to show you how to solve the problem, not for use in a live application

A bit more research on the subject finds:

webkit-playsinline Indicates that a video element should play in-line instead of full-screen.

Related Tags “video” Availability Available in iOS 4.0 and later. (Enabled only in a UIWebView with the allowsInlineMediaPlayback property set to YES. source

I'm afraid it just not going to be possible using the video player in Safari

They have a guide for Video on Canvas, but as you probably know it isn't supported in IOS yet: video on canvas

This document summarises the current restrictions around mobile media content in IOS: mobile video status

于 2013-10-25T00:38:12.970 回答
2

我的理解是iOS总是全屏播放视频。在 Apple 自己的网站上，他们使用编码的图像数据和 Javascript 绘图来进行类似视频的播放。以下是他们如何做到的细目：

https://docs.google.com/document/pub?id=1GWTMLjqQsQS45FWwqNG9ztQTdGF48hQYpjQHR_d1WsI

于 2013-10-31T12:17:36.760 回答
1

只需添加“playsinline”：

在 JavaScript 中：

yourclassName.setAttribute('playsinline', '');

在 html 中：

<video class="Vidoo" src="https://.../video.mp4" playsinline></video>
于 2021-12-11T06:09:13.170 回答