禁止iPhone Safari video标签视频自动全屏的办法

最近做一个移动端微信页面项目，在微信页面中有视频播放，但是需要禁止IOS的自动全屏播放（前提必须使用video标签）。
如：

代码如下:

<video id="post" autoplay loop preload="auto">
<source src="foo.mp4" type="video/mp4">
</video>

在iPhone safari 点击视频会弹出播放器进行全屏播放。

在网上看了看别人给出的答案，引用如下：

可以在 video 标签上加一个 “webkit-playsinline” 属性 ，如下：

代码如下:

<video id="video" width="280" height="140" webkit-playsinline ></video>

我想说这能解决问题吗？ 答案当然是不能。。。。

当然在iOS APP中使用网页视频，是可以禁止全屏播放的，方法如下：

前端将video标签加入属性 webkit-playsinline，如：

代码如下:

<video id="player" width="480" height="320" webkit-playsinline>

Obj-C中，添加配置：

代码如下:

webview.allowsInlineMediaPlayback = YES

还有网友这样回答答案：

把视频转码，用ajax去分段请求数据来填充到canvas。

当然如果确实需要退出全屏，可以使用这样的方法，但是毕竟这样没什么必要。

所以最终的结论是：没有办法禁止 iPhone Safari video标签视频自动全屏.

赞 (0)

相关推荐

  • jQuery旋转插件—rotate支持(ie/Firefox/SafariOpera/Chrome)

    网上发现一个很有意思的jQuery旋转插件,支持Internet Explorer 6.0+ .Firefox 2.0 .Safari 3 .Opera 9 .Google Chrome,高级浏览器下使用Transform,低版本ie使用VML实现. 调用和方法: rotate(angle) angle参数:[Number] – 默认为 0 – 根据给定的角度旋转图片 例如: 复制代码 代码如下: $("#img").rotate(45); rotate(parameters)para

  • iphone safari不支持position fixed的解决方法

    需求是这样的,许多pc web页面的导航都是固定的,比如google的首页,现在要将这种固定的导航转移到mobile web下,很自然地就会想到position:fixed; bottom: 0,android下运行正常,但在iphone safari下就会出现问题,当滚动条滚动时,导航条就会出现屏幕的上方,黑乎乎的一块,很不协调.许多人推荐iscroll.jquery mobile等框架,但有时效果不如意或是得阅读框架源码进行二次开发,会花费好长一段时间的.经过一段时间的研究,找到了一种解决办

  • IOS中safari下的select下拉菜单文字过长不换行的解决方法

    IOS中safari下的select下拉菜单文字过长不换行的解决方法

    今天遇到下图这种问题,文字过长,显示不全.折腾了老半天,在网上搜了半天也找不到解决方案. 于是问了下同事,同事提到了<optgroup>,这个标签厉害. <optgroup> 标签定义选项组. optgroup 元素用于组合选项.当您使用一个长的选项列表时,对相关的选项进行组合会使处理更加容易. 以上所述是小编给大家介绍的IOS中safari下的select下拉菜单文字过长不换行的解决方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的.在此也非常感谢大家对

  • 最简单js代码实现select二级联动下拉菜单

    本文实例为大家分享了js实现select二级联动下拉菜单,供大家参考,具体内容如下 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.

  • js代码判断浏览器种类IE、FF、Opera、Safari、chrome及版本

    因为ie10-ie11的版本问题,不再支持document.all判断,所以ie判断函数要重新写了 function isIE() { //ie? if (!!window.ActiveXObject || "ActiveXObject" in window) return true; else return false; } 第一种,只区分浏览器,不考虑版本 复制代码 代码如下: function myBrowser(){     var userAgent = navigator.

  • iOS9中的WebKit 与 Safari带来的惊喜

    iOS9中的WebKit 与 Safari带来的惊喜

    每个用过 UIWebView 的iOS开发者对其诸多的限制和有限的功能也深有感触.悻然,自iOS8推出 WebKit 框架后将改变这一窘境.在本文我将会深入WebKit来体验一下它给我们带来的好处,同时也看看在iOS9中新加入的 SFSafariViewController 有些什么新的惊喜. 通用的浏览行为 所谓的通用浏览行为主要可以归纳为以下的几种: 网页载入进度 前进 后退 刷新 如果每个用到 WebView 的 app都要做一个专用的Controller也挺麻烦的,我以前就直接采用其它第

  • jQuery结合CSS制作漂亮的select下拉菜单

    我们在进行表单设计时,可能要用到select下拉选项控件,遗憾的是,IE浏览器默认的select控件外观非常丑陋,而且不能用样式来控制,不能在选项中添加图片等信息.今天我将通过实例来讲解如何用CSS和jQuery来制作漂亮的下拉选项菜单. XHTML <div id="dropdown"> <p>请选择城市</p> <ul> <li><a href="#">长沙</a></li

  • javascript实现阻止iOS APP中的链接打开Safari浏览器

    上次根据网上的教程给自己的网站弄了一个Web APP,但是给用户的感觉却十分糟糕. 问题说明: 怎么了?原来是打开WEB APP后在主页上随意打开连接,就会自作主张地打开Safari浏览器.原来好好的伪装和心情就全被破坏掉了.这该如何是好?原来解决方法十分简单.仅仅加入这些代码就好了.实验测试在本人的 iPhone (iOS 7.1)和iPod (iOS 6.1.4)上测试通过,根据原作者的叙述,最新的 iOS 7.0.4(iPhone 与 iPad)测试通过,代码应该兼容性不错,在这里分享:

  • jQuery实现非常实用漂亮的select下拉菜单选择效果

    jQuery实现非常实用漂亮的select下拉菜单选择效果

    本文实例讲述了jQuery实现非常实用漂亮的select下拉菜单选择效果.分享给大家供大家参考,具体如下: 先来看如下运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/js-select-chose-style-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtm

  • 禁止iPhone Safari video标签视频自动全屏的办法

    最近做一个移动端微信页面项目,在微信页面中有视频播放,但是需要禁止IOS的自动全屏播放(前提必须使用video标签). 如: 复制代码 代码如下: <video id="post" autoplay loop preload="auto"> <source src="foo.mp4" type="video/mp4"> </video> 在iPhone safari 点击视频会弹出播放器进行

  • vue-video-player 解决微信自动全屏播放问题(横竖屏导致样式错乱问题)

    对于vue-video-player,从github上找到一段代码,直接放页面!可以了,视频展示出来了!开始下一个功能.... 这可能是大部分前端开发者一贯的思维模式,拿来一个插件,看着demo就做出来了,功能展示正常就OK了,但是一旦出了bug,就会面向百度编程或者面向Google编程! 其实,我也是这样的,哈哈哈哈..... 废话不多说,最近在做一个视频播放的功能,找到vue-video-player插件后,咔咔咔完事,拿着我的爱疯,完美演绎!但是其他人的国产某牌手机,展示的完全不一样,打开

  • transform实现HTML5 video标签视频比例拉伸实例详解

    transform实现HTML5 video标签视频比例拉伸实例详解

    曾几何时,项目中有碰到视频比例拉伸的需求,但是发现这个看似再普通不过的一个需求,找遍全网至今都没有找到解决方法.因为强制给video标签设置width和height的话只会将video的显示区域拉伸,但是里面的视频还是保持原始比例,怎么调都没用: 因为当我横向拉伸时: 当我纵向拉伸时: 2016-09-21 11:15:40 更新: 感谢 @RileyRen 提醒,原来还有object-fit这一属性,把它设置为fill就满足需求了,泪奔~,这篇文章就当看个笑话吧,哎,不过可以看看我家喵星人的处

  • WKWebview非全屏自动播放h5视频的实现方法（Swift、OC）

    前言 WKWebview加载一个视频播放的h5页面时,默认是需要用户点击一下才能播放视频,且视频播放时会全屏播放.如果想要h5页面视频非全屏自动播放该怎么做呢? Swift实现 这个时候就需要设置WKWebview的configuration参数,我们先来看一下Swift的实现,代码如下: let configuration = WKWebViewConfiguration() configuration.allowsInlineMediaPlayback = true if #availabl

  • Vue中video标签如何实现不静音自动播放

    由于浏览器厂商为了提高用户体验禁止video标签可以有声的自动播放,也就是说如果想让video标签能够自动播放必须给video标签添加muted属性. 但是在开发的过程中我们需要用视频自动有声播放,比如一些学习网站,需要老师或同学进入页面就可以播放学习视频,那么如何去实现呢? 我是在Vue框架下实现的,其他框架仅供参考. 首先我们要让video标签能够自动播放,也就是让video标签静音条件下自动播放. <video ref="videoPlayer" id="vide

  • iphone的safari浏览器中实现全屏浏览的方法

    正常情况下,当你用手机浏览器打开网页时,导航就停留在上面,这样实际展示的屏幕就变小了.那能不能加载后,屏幕就自动全屏呢?这就是本文要讨论的. Add to Home Screen 说到全屏不得不谈iPhone下的safari有一个特别且重要的功能就是"Add to Home Screen".(就在Safari浏览器最下方,最中间的那个位置,点击选择即可)这个功能类似于把网页地址作为一个超链接的方式放到手机桌面,并且可以直接访问.不过要注意的是每个链接都需要js进行一次特殊处理,那就是监

  • Android使用WebView实现全屏切换播放网页视频功能

    首先写布局文件activity_main.xml: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/container" android:layout_width="fill_parent" and

  • 文章中优酷视频全屏及去除广告在线转换

    近来翻看很多朋友的BLOG,都发现很多好看的优酷视频不能全屏,或一点全屏又跳到官方网了,结果又要重新缓冲. 于是就找了一些资料拼了一个在线转换的出来.(不算是插件,算是一个辅助工具吧) 我分别添加了两个相同的视频,一个是没有修改过的视频,不能全屏.一个是修改过的视频,可以全屏. 具体大家对比一下.转换器和下载都在两个视频的下面,大家可以试一下. (注:这个转换器是用php,UTF-8写的,不同编码的朋友可以转换一下,出现乱码不负责任) 加优酷视频请用FCKeditor模式.再把转换好的地址复出去

  • Android WebView实现全屏播放视频

    目录 介绍 主要代码 介绍 最近项目开发中用到了WebView播放视频的功能,总结了开发中犯过的错误,这些错误在开发是及容易遇到的,所以我这里总结了一下,希望大家看到后不要再犯类似的错误,尽可能提高开发效率: 这个Demo我这里也参考了网上写的一个比较好的一个Demo,经过总结修改,写出来的. 主要代码 以下是相应代码: MainActivity: package com.androidwebviewdemo; import android.app.Activity; import androi

  • Android编程实现WebView全屏播放的方法(附源码)

    本文实例讲述了Android编程实现WebView全屏播放的方法.分享给大家供大家参考,具体如下: 最近因为项目要用webview加载html5的视频,开始不能全屏播,做了很久才做出来!那按我的理解说下怎么实现全屏吧. 首先写布局文件activity_main.xml: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.

随机推荐