HTML5如何禁止iPhonesafari视频自动全屏

作者：Kevinczp | 来源：互联网 | 2023-05-19 16:02

<videoautoplaypreloadauto><sourcesrclove.mp4typevideo

   视频的播放我是通过js控制的，现在的问题是在iPhone safari 中点击视频会弹出播放器进行全屏播放，而在微信或者qq的内置浏览器就不会。
那么如何禁止html5视频在safari浏览中自动全屏播放呢，我只是想在页面的某块区域内播放，而不是全屏，该怎么控制呢？

2 个解决方案

#1

1.把视频转码，用ajax去分段请求数据来填充到canvas。不过现在还没找到完美的办法，这个是算是曲线救国。
2.在iOS APP中使用网页视频，是可以禁止全屏播放的，方法如下：
前端将video标签加入属性 webkit-playsinline，如：；
Obj-C中，添加配置：webview.allowsInlineMediaPlayback = YES;
这样web视频就可以嵌入播放了，方案参考：
http://stackoverflow.com/questions/3699552/html5-inline-video-on-iphone-vs-ipad-browser
https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIWebView_Class/index.html

#2

webview中用html5的video方式播放视频时，在ipad上是默认原来大小的，而在iphone上是默认全屏播放的。
论坛中搜索，都没给出答案，google－》stackoverflow，找到最终解决方法：
HTML里video必须加上webkit-playsinline属性

Obj-C里，webview设置allowsInlineMediaPlayback属性为YES
webview.allowsInlineMediaPlayback = YES;
原文链接： http://stackoverflow.com/questions/3699552/html5-inline-video-on-iphone-vs-ipad-browser

推荐阅读

format
微信小程序打开红包的css_【微信小程序】——wxss引用外部CSS文件及iconfont

小程序引入外部文件的方式是：import**.wxss;因为业务需要，正在开发的小程序中需要使用iconfont，很容易想到了H5的引 ... [详细]

蜡笔小新 2023-10-13 13:30:45
format
Mac OS 升级到11.2.2 Eclipse打不开了，报错Failed to create the Java Virtual Machine

本文介绍了在Mac OS升级到11.2.2版本后，使用Eclipse打开时出现报错Failed to create the Java Virtual Machine的问题，并提供了解决方法。 ... [详细]

蜡笔小新 2023-12-14 12:01:13
ip
Voicewo在线语音识别转换jQuery插件的特点和示例

本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件，该插件具有快速、架构、风格、扩展和兼容等特点，适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ... [详细]

蜡笔小新 2023-12-13 20:01:16
ip
flowable工作流流程变量_信也科技工作流平台的技术实践

1背景随着公司业务发展及内部业务流程诉求的增长,目前信息化系统不能够很好满足期望,主要体现如下：目前OA流程引擎无法满足企业特定业务流程需求，且移动端体 ... [详细]

蜡笔小新 2023-12-13 10:17:15
ip
前端人员必须知道的三个问题及其发展阶段

本文介绍了前端人员必须知道的三个问题，即前端都做哪些事、前端都需要哪些技术，以及前端的发展阶段。初级阶段包括HTML、CSS、JavaScript和jQuery的基础知识。进阶阶段涵盖了面向对象编程、响应式设计、Ajax、HTML5等新兴技术。高级阶段包括架构基础、模块化开发、预编译和前沿规范等内容。此外，还介绍了一些后端服务，如Node.js。 ... [详细]

蜡笔小新 2023-12-12 12:45:59
scala
创建ipadWEB应用程序到主屏幕

1.webkit内核中的一些私有的meta标签，这些meta标签在开发webapp时起到非常重要的作用(1) ... [详细]

蜡笔小新 2023-10-17 11:02:41
ip
mintui中的下拉加载，可以一直加载数据，怎么处理呢？

html结构 ... [详细]

蜡笔小新 2023-10-17 10:44:03
ip
将两个内嵌块左右对齐放在同一行上 - Align two inline-blocks on same line, one to the left and one to the right

HowcanIaligntwoinline-blockssothatoneisleftandtheotherisrightonthesameline?Whyi ... [详细]

蜡笔小新 2023-10-14 08:37:52
format
Material Design Lite ，简洁惊艳的前端工具箱。

2019独角兽企业重金招聘Python工程师标准MaterialDesignLite简介本文主要介绍MaterialDesign设计语言的HTMLCSSJS部分实现。对应每一 ... [详细]

蜡笔小新 2023-10-13 13:44:20
ip
javascript – 关于微信浏览器的疑问

后端开发|php教程php,javascript,html5后端开发-php教程现在正在开发移动端webapp，遇到了比较麻烦的问题：用户输入帐号密码登陆后，自动跳转到首页,,QQ ... [详细]

蜡笔小新 2023-10-13 09:55:00
ip
求解hdu 1003 java题目的动态规划优化方法

本文讨论了如何优化解决hdu 1003 java题目的动态规划方法，通过分析加法规则和最大和的性质，提出了一种优化的思路。具体方法是，当从1加到n为负时，即sum(1,n)sum(n,s)，可以继续加法计算。同时，还考虑了两种特殊情况：都是负数的情况和有0的情况。最后，通过使用Scanner类来获取输入数据。 ... [详细]

蜡笔小新 2023-12-14 13:11:00
ip
Signing Identities, Missing Private Key, Cannot sign App

这个问题发生在重新安装系统后，丢失了之前的privatekey等。所以解决方法就是提示的revokeandrequest。到developercenter中找到certificat ... [详细]

蜡笔小新 2023-10-15 12:07:56
byte
Python-图片和视频文件爬虫

最近在学Python，看了不少资料、视频，对爬虫比较感兴趣，爬过了网页文字、图片、视频。文字就不说了直接从网页上去根据标签分离出来就好了。图片和视频则需要在获取到相应的链接之后取做下载。以下是图片和视 ... [详细]

蜡笔小新 2023-10-15 09:28:43
version
前端提高篇(七十)：SVG基本使用、基本样式、路径path

SVG是使用XML来描述二维图形和绘图程序的语言。SVG遵循的是xml的规范，与html5的使用有所区别SVG绘制出来的是矢量图，放大之后不会失真官方文 ... [详细]

蜡笔小新 2023-10-14 15:30:33
version
微信小程序：弹窗列表组件封装

微信小程序：弹窗组件封装popup.wxml ... [详细]

蜡笔小新 2023-10-13 09:00:08

Kevinczp

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章