iOS-webView加载视屏横向全屏播放(video)

已于 2022-06-23 14:20:02 修改
阅读量7.3k 收藏 2
点赞数 1
分类专栏： Html5 侵掠如火 Object-C 文章标签： webview ios android
于 2016-12-21 14:46:44 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/whuizhou/article/details/53784566
版权
本文介绍了在iOS应用中，WebView加载的H5视频如何实现横向全屏播放。通过分析问题并监听全屏通知，调整WebView尺寸以达到横屏全屏播放的效果。在退出全屏时，恢复原始窗口尺寸，确保体验一致。文中提供了GitHub上的示例代码，并邀请读者一起探讨提升应用体验的方法。
摘要由CSDN通过智能技术生成

项目搞到这个时候，就有点费劲了。
只要你看了洲洲哥的这个文章就木事的啦。

demo地址：GitHub - 7General/shouldAutorotate: 屏幕旋转-全屏播放视频

情况描述 iOS中vc里放了一个webview这个webview里加载一个连接h5。这个h5中有一个video和一些其他的标签。当让这里的video标签才是重要的。

要求:在点击视屏播放的时候，改视屏要横着全屏播放。当点击完成或者缩小屏幕的时候的就要回到出事位置了。

1:先来看看h5的代码

 <video id="myVideo" width="100%" height="400px" 
poster="/ItaxerGS/ENTYPATH/files/enty/EF20161028548728693668.png" 
src="http://ysyc-winys.chinacloudapp.cn:7001/ItaxerGS/ENTYPATH/files/enty/EF20161028548448333271.mp4"
最低0.47元/天 解锁文章
追风舟
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ios-webView加载进度和显示标题.zip
07-11
这个"ios-webView加载进度和显示标题.zip"文件很显然聚焦于如何利用WebView来展示网页，并实时跟踪其加载进度以及动态更新标题。下面我们将深入探讨这个主题。 首先，我们需要了解`WKWebView`，它是Apple在iOS 8及...
iOS wkWebview播放HTML5 video视频 自动全屏问题解决
技术前端，忠于热爱 @回忆哆啦没有A梦
04-28 6693
HTML5使用video播放视频，限制视频的尺寸，但在ios中出现的全屏问题 使用html5 的video标签播放视频的时候，限制视频的尺寸，在android上是没有问题的，但是在ios上发现，视频没有开始播放的时候还是好的，但是一旦播放开是，就会全屏，非常奇怪。 <video id="video" width="100%" poster="images/video.jpg" preload width="100%" controls> <source type="video/
uniapp 中 H5端 使用 video 使其全屏横屏播放
leaf的博客
09-13 1万+
起因： H5端 uniapp 提供的 video 组件，在点击其全屏按钮后，进入全屏状态，视频显示部分仍然为竖屏显示，无法转换成横屏，查阅了大量的资料。 官方人员说 H5端不支持 了解详情 但是客户提出来了就要想办法解决 解决方案： 自定义 video 组件，不使用官方组件 使用 css 进行样式修改强制 横屏 就有了第一版 获取video标签，对齐进行css样式修改… 简单粗暴 需要把video原生带的全屏隐藏掉(有这个属性show-fullscreen-btn改成false就可以了)，自己再写一个
解决video在ios中自动全屏问题
最新发布
weixin_42082342的博客
07-31 309
在开发APP的时候，发现video视频在ios中点击播放会自动全屏的问题，在小程序端正常，查了资料做出以下总结，顺便记录一下。
IOS 微信浏览器 视频自动播放
qq_43229374的博客
05-04 333
ios 实现视频自动播放
iOS webview中video标签播放视频相关
shachenbao1101的博客
03-25 4133
一.iOS webview中video标签播放视频导致状态栏异常: h5用video标签播放视频，系统会弹起一个window用AVPlayerViewController播放视频，导致异常，可以在控制器中监控window退出，在回调方法中解决问题。 1.通知：receiveWindowDidBecomeHiddenNotification 2.收到通知处理 - (void)receiveN...
ios WKWebView之视频无法播放
weixin_40200876的博客
01-24 1万+
设置allowsInlineMediaPlayback属性为true。 WKWebViewConfiguration *config = [WKWebViewConfiguration new];   config.allowsInlineMediaPlayback = YES; if (@available(iOS 10.0, *)) {             config.media...
APP端webview自动播放视频
热门推荐
Bug管理员
12-15 1万+
昨天碰到一需求，需要写一个html5页面，要求支持打开自动播放视频。 ok，要支持自动播放，设置的autoplay="autoplay"就可以了吧。 测试发现只有在浏览器中是正常播放了，android和ios都没有播放。 换了种写法： function playVideo(){ var video = document.getElementById("alt-player-ios");
ios-webView加载https链接.zip
07-11
在iOS开发中，Web视图（WebView）是一个重要的组件，用于在原生应用中嵌入网页内容。在处理HTTPS链接时，iOS系统会执行严格的SSL/TLS验证，以确保网络通信的安全性。针对"ios-webView加载https链接.zip"这个主题，...
ios-webView加载进度条,仿主流浏览器进度条.zip
07-11
能根据webView加载的内容，动态的显示进度。 对NJKWebViewProgress的再次运用 NJKWebViewProgress下载地址：https://github.com/ninjinkun/NJKWebViewProgress
vue-bridge-webview：javascript bridge androidios webview
02-06
javascript bridge android / ios webview 安装 浏览器 [removed][removed] [removed][removed] 包装经理 npm install vue-bridge-webview --save import Vue from ' vue ' import VueBridgeWebview f
ios-webView与js的交互.zip
07-11
WebView与JavaScript的交互是iOS应用与Web技术融合的关键，它使得原生应用能够利用Web技术来增强用户体验，同时也让网页能够调用iOS原生功能。本资料“ios-webView与js的交互.zip”主要探讨了如何在iOS应用中实现...
安卓浏览器WebViewJSHTML5相关-Android--webview全屏播放HTMLvideo.rar
07-29
为了在Android的WebView中实现全屏播放，我们需要对`<video>`标签进行一些定制。通常，我们可以添加一个自定义的全屏按钮，并通过JavaScript与Java代码进行交互，触发全屏模式。 在JavaScript层面，我们可以为`...
cordova-plugin-ionic-webview:用于Cordova的Web View插件，专门用于Ionic应用程序
05-04
该插件在iOS上使用WKWebView，在Android上使用最新的常绿webview。 此外，此插件使Web开发人员期望使用HTML5样式路由轻松构建单页应用程序。 注意：此存储库及其文档适用于cordova-plugin-ionic-webview @ 5.x ，...
iOS-uyghur-keyboard-webview
05-23
iOS-维吾尔键盘-Webview 如何将维吾尔族添加到iPhone上的Webview剪裁图片如何使用我们将以下内容添加到html中的输入中 < input id = "name" type = "text" placeholder = "ئىسمى" name = "firstname" ...
react-native-web-webview:React Native用于RN的WebView的Web实现
05-17
react-native-web-webview React Native用于RN的WebView的Web实现 入门 $ npm install react-native-web-webview --save 别名打包您的webpack配置中： resolve: { alias: { 'react-native': 'react-native-web...
ios 几十行代码完成原生播放器UIView嵌入WKWebView层级
github_35041937的博客
04-20 2999
混合开发已经非常流行了。但是原生的直播播放器涉及到编解码的过程，如果项目是以webview为主的 ，那么原生的播放器只能浮动在webview的上面 会遮挡住导航条和 一些webview的按钮，这样底下的东西都操作不到了。 解决方案 1.把播放器放在webview的下面，让webview透明过去，实践显示无法穿透 多层push过后的webview 2.h5 播放H264 ，目前据说效果不好...
html5 video自动播放-Android、IOS video自动播放-移动端video自动播放
weixin_42321009的博客
04-11 1万+
<video webkit-playsinline playsinline x5-playsinline="" x-webkit-airplay="allow"class="vdo" controls="controls" src="xxx.mp4" autoplay="autoplay" id="video"></video> IOS处理方法 $(document)...
iOS视频播放横竖屏切换技巧
sure453361860的专栏
08-27 4477
一、需求：横竖屏切换。 二、效果：                                三、实现： 如上图，点击工具栏的第四个按钮进行横屏切换： - (void)toolTabButtonPressed:(AKVideoToolTab1 *)sender{ if (sender.selectedIndex == 4) {//切换至全屏
解决React-Native-Webview ios加载时候白屏问题
06-11
React-Native-Webview是一个React Native中的WebView组件，同样会出现白屏问题。以下是一些可能的原因和解决方案： 1. iOS版本问题：如果使用的是较老的iOS版本，可能会出现WebView组件的兼容性问题，导致白屏。可以升级iOS版本来解决这个问题。 2. 缓存问题：iOS设备中的WebView会自动缓存已经加载过的网页，如果缓存过多可能会导致白屏。可以尝试清除WebView的缓存，可以参考以下代码： ```javascript import { WebView } from 'react-native-webview'; // ... <WebView source={{ uri: 'https://www.example.com' }} cacheEnabled={false} // ... /> ``` 3. WebKit问题：在iOS设备中，WebView默认使用的是WebKit，有时候可能会出现WebKit的问题导致白屏。可以尝试禁用WebKit来解决这个问题，可以参考以下代码： ```javascript import { WebView } from 'react-native-webview'; // ... <WebView source={{ uri: 'https://www.example.com' }} useWebKit={false} // ... /> ``` 4. 调试问题：在开发过程中，有时候可能会出现一些JavaScript错误导致WebView白屏。可以使用开发者工具来调试JavaScript代码，找出问题所在。 希望以上这些解决方案能够解决你的问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值