首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在通过WKWebView加载的视频上为SwiftUI启用inLine媒体播放

,可以通过以下步骤实现:

  1. 首先,确保你已经在项目中导入了WebKit框架。
  2. 创建一个遵循WKNavigationDelegate协议的类,并实现其中的方法。这个类将用于处理WKWebView的导航事件。
  3. 在该类中,实现webView(_:decidePolicyFor:decisionHandler:)方法,该方法用于拦截并处理WKWebView的导航请求。在该方法中,你可以检查请求的URL是否是视频链接,并决定是否允许加载该链接。
  4. 如果请求的URL是视频链接,你可以创建一个自定义的UIView来替代WKWebView,并在该UIView中使用AVPlayer来播放视频。你可以使用AVPlayerLayer将视频播放器的图层添加到自定义的UIView上。
  5. 在SwiftUI的视图中,使用UIViewRepresentable协议创建一个自定义的UIView包装器。在该包装器中,将自定义的UIView返回给SwiftUI视图层级。
  6. 在SwiftUI视图中,使用onAppear修饰符来监听视图的出现事件,并在其中加载WKWebView并启用inLine媒体播放。

下面是一个示例代码,演示了如何在通过WKWebView加载的视频上为SwiftUI启用inLine媒体播放:

代码语言:txt
复制
import SwiftUI
import WebKit
import AVKit

class WebViewDelegate: NSObject, WKNavigationDelegate {
    func webView(_ webView: WKWebView, decidePolicyFor navigationAction: WKNavigationAction, decisionHandler: @escaping (WKNavigationActionPolicy) -> Void) {
        if let url = navigationAction.request.url, url.absoluteString.hasSuffix(".mp4") {
            // 检查请求的URL是否是视频链接
            decisionHandler(.cancel) // 取消加载视频链接
            playVideo(url: url) // 播放视频
        } else {
            decisionHandler(.allow) // 允许加载其他链接
        }
    }
    
    private func playVideo(url: URL) {
        let player = AVPlayer(url: url)
        let playerViewController = AVPlayerViewController()
        playerViewController.player = player
        
        // 在自定义的UIView上添加AVPlayerLayer
        let videoView = VideoPlayerView(player: player)
        playerViewController.view.addSubview(videoView)
        videoView.frame = playerViewController.view.bounds
        
        // 模态弹出视频播放器
        UIApplication.shared.windows.first?.rootViewController?.present(playerViewController, animated: true) {
            player.play()
        }
    }
}

struct WebView: UIViewRepresentable {
    let webViewDelegate = WebViewDelegate()
    
    func makeUIView(context: Context) -> WKWebView {
        let webView = WKWebView()
        webView.navigationDelegate = webViewDelegate
        return webView
    }
    
    func updateUIView(_ uiView: WKWebView, context: Context) {
        let url = URL(string: "https://example.com/video")!
        let request = URLRequest(url: url)
        uiView.load(request)
    }
}

struct ContentView: View {
    var body: some View {
        WebView()
            .onAppear {
                // 在视图出现时加载WKWebView并启用inLine媒体播放
            }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

class VideoPlayerView: UIView {
    private let playerLayer = AVPlayerLayer()
    
    init(player: AVPlayer) {
        super.init(frame: .zero)
        playerLayer.player = player
        layer.addSublayer(playerLayer)
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    override func layoutSubviews() {
        super.layoutSubviews()
        playerLayer.frame = bounds
    }
}

这是一个基本的实现示例,你可以根据自己的需求进行修改和扩展。在这个示例中,我们通过拦截WKWebView的导航请求,判断是否是视频链接,并使用AVPlayer来播放视频。同时,我们使用UIViewRepresentable协议创建了一个自定义的UIView包装器,将自定义的UIView返回给SwiftUI视图层级。最后,在SwiftUI的视图中使用onAppear修饰符来监听视图的出现事件,并在其中加载WKWebView并启用inLine媒体播放。

请注意,这只是一个示例,实际应用中可能需要根据具体情况进行适当的调整和优化。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Ubuntu或Debian安装Subsonic媒体服务,通过Linode来播放(下载)音乐

Subsonic是一种便于操作媒体服务,并且具有友好用户界面,能够与多个用户共享音乐和视频。它具有高度扩展性,并包括一些特性,如Chromecast(谷歌盒子)支持和文件转换。...本指南介绍如何在运行Debian或UbuntuLinode设置Subsonic。如果你有一个大型音乐库,请考虑将块存储卷(新存储空间)附加到你Linode以此来存储你音乐文件。...Subsonic创建一个新系统用户,运行代码如下: do useradd --system subsonic sudo gpasswd --add subsonic audio 3.文本编辑器中打开...在此文件中,你可以更改用户,Subsonic侦听端口,增加可以使用内存量,并使用SSL加密流媒体数据。...当然,如果你想更改音乐存储位置到你想要位置: sudo mkdir /var/music sudo chown subsonic:subsonic /var/music 2.浏览器中打开Subsonic

2.5K30

如何通过WPF编译H265视频媒体播放器EasyPlayerPro改变控件位置?

WPF用户界面框架提供了统一编程模型、语言和框架,真正做到了分离界面设计人员与开发人员工作;同时它提供了全新媒体交互用户图形界面,是我们在编译中也会用到一种框架。...对于EasyPlayerPro播放我们也尝试了通过WPF执行,下面分享下我们WPF播放EasyPlayerPro控件改变位置方式。...创建一个WPF程序,使用EasyPlayPro中dll文件,传入一个窗口句柄,这样运行起来画面如下图显示;但是有个问题:就是WPF加入任何控件都会隐藏在画面下面。...当我们直接使用WPF控件句柄OSG等第三方控件绘制视图区域时,我们就会发现视图区域占用整个窗体,无法在上面添加任何控件(不是控件没添加上)。...="image2" Stretch="Fill" Margin="40,214,0,0" /> 5、最后运行效果如下图(图像可以加任何控件

1.3K20

iOSWebView——WKWebView

// 默认值NO,用户不可以放大或缩小页面;如果设置YES,页面可以通过放大缩小去适应,用户也可以通过手势来放大和缩小 [self.webview.configuration ignoresViewportScaleLimits...这个值决定了用内嵌HTML5播放视频还是用本地全屏控制。...[self.webview.configuration allowsPictureInPictureMediaPlayback]; // 网页中媒体是否需要手势才能开始播放(iOS 10)...WKNavigationDelegate 如命名,这个是WKWebView导航代理。它控制了WKWebView加载一个页面流程中各个关键时间节点。...,js会尝试加载某个URL,客户端加载前拦截这个URL,通过解析这个URL识别它内容,调用相应原生方法,并阻浏览器加载这个URL。

3.3K20

AVKit框架详细解析(四) —— 基于AVKit 和 AVFoundation框架视频流App构建

在此过程中,您将学习 AVKit 和 AVFoundation 框架基础知识。 本教程中,您将学习如何: 添加本地视频。 添加流媒体视频启用播放控件。 实现循环。 实现画中画。...AVPlayer 是 iOS 播放视频核心。 播放器对象可以启动和停止您视频,更改其播放速率,甚至可以调高和调低音量。 将播放器视为能够一次管理一个媒体资产播放控制器对象。...不是加载本地视频,而是通过用以下内容替换该行来加载所有视频: private let videos = Video.fetchLocalVideos() + Video.fetchRemoteVideos...0.0 : 1.0 } 逐条看下: 1) 通过将速率设置 1.0,您可以像以前一样播放视频。 2) 当有人双击播放器视图时,您可以添加一个侦听器。 这会在 2x 和 1x播放速率之间切换。...通过将速率设置 0.0 来停止视频剪辑播放: embeddedVideoRate = 0.0 要在全屏视频关闭时恢复播放,请在 VideoFeedView 主体中找到 fullScreenCover

6.9K10

WKWebView详解

您可以使用WKWebView类来应用程序中嵌入web内容,通过创建一个WKWebView对象,将其设置视图,并发送一个请求来加载web内容。...)从0.0到1.0不等 页面加载完成后,估算进度保持1.0,直到新导航开始,这时估算进度重置0.0 支持KVO 是否页面内所有资源都是通过安全链接加载 @property(nonatomic...,媒体播放方式,用户选择项目的粒度,以及很多其他选项。...HTML文档中添加视频元素时,还必须包括playsinline属性 iOS 10.0之前创建应用程序必须使用webkit-playsinline属性 iPhone默认值false,而iPad默认值...WKAudiovisualMediaTypeAudio 包含音频媒体类型需要用户手势才能开始播放 WKAudiovisualMediaTypeVideo 包含视频媒体类型需要用户手势才能开始播放

20.5K193

WKWebView

WKWebViewConfiguration API 使用WKWebViewConfiguration类,你可以确定网页呈现速度、媒体播放处理方式等等。...布尔值,指示网络视图是否【内容渲染完全加载到内存之前】禁止内容呈现,默认是NO。 设置媒体播放首选项 allowsInlineMediaPlayback。...布尔值,指示HTML5视频是否内嵌播放,或使用native全屏控制器。 allowsAirPlayForMediaPlayback。是否允许AirPlay。...显示加载进度条 我们可以通过监听WKWebViewestimatedProgress属性值来实现一个加载进度条,而UIWebView只能是通过timer事件做一个假加载进度条。...而iOS中WebKit.framework,就是WebCore、底层桥接、JSCore引擎等核心模块基础,针对iOS平台项目封装。

6K20

WKWebView视频媒体播放处理

alloc] init]; // 默认是NO,这个值决定了用内嵌HTML5播放视频还是用本地全屏控制 configuration.allowsInlineMediaPlayback = YES; /.../ 自动播放, 不需要用户采取任何手势开启播放 // WKAudiovisualMediaTypeNone 音视频播放不需要用户手势触发, 即为自动播放 configuration.mediaTypesRequiringUserActionForPlayback...获取视频播放地址,使用自定义播放器进行播放 - (void)webView:(WKWebView *)webView didFinishNavigation:(null_unspecified WKNavigation...[Process] kill() returned unexpected error 1 该系统版本下,WKWebView使用配置WKWebViewConfiguration,会无法播放。...资料:收到控制台警告:当我iOS13.2中加载WKWebView时,[Process] kill() returned unexpected error 1

4.2K40

关于 iOS 10 中 ATS 问题

对于网页浏览和视频播放行为,iOS 10 中新加入了NSAllowsArbitraryLoadsInWebContent键。...通过将它设置YES,可以让你 app 中WKWebView和使用AVFoundation播放在线视频不受 ATS 限制。这也应该是绝大多数使用了相关特性 app 选择。...如果你 app 只支持 iOS 10,并且有用户可以自由输入网址进行浏览功能,或者是在线视频音频播放功能的话,简单地加入NSAllowsArbitraryLoadsInWebContent,并且将组件换成...现在 beta 版中,似乎只要存在NSAllowsArbitraryLoadsInWebContent,不论其设置如何,WKWebView都不能加载。...如果没有特殊什么需求的话,尽早将UIWebView全部换为WkWebView会是明智选择。 不得不说,Apple 使用自己现在强势地位,推动技术进步努力是有目共睹

2.2K20

一文看完 WWDC 2022 音视频相关更新要点丨音视频工程示例

CoreImage、Metal、SwiftUI 展示 EDR 内容 基于 AVFoundation、Metal 展示 HDR 视频 3、媒体播放相关 打造强大视频播放体验 NowPlaying 相关信息展示和播放交互...,我们可以选择不同框架来实现: 简单播放 HDR 视频,可以使用 AVKit 和 AVFoundation; 指定 layer 播放 HDR 视频,可以使用 AVPlayerLayer; 对...接收数据同时录制 4)多任务场景使用相机 iPad ,用户可以通过多种方式执行多项任务。... macOS 屏幕共享应用、视频会议应用、游戏流媒体应用等提供高性能音频和视频屏幕录制能力。...TensorFlow Mac Studio/M1 Ultra 通过 GPU 加速与 CPU 训练相比,各种网络上达到了高达 16 倍加速。

2.5K10

iOS新闻类App内容页技术探索

浏览内容页这种场景下, HybridPageKit 中通过WKWebView复用回收以及资源缓存,极大降低了WKWebView加载渲染HTML时间,使之低于原生UIWebView。...复杂UI及逻辑实现困难 为了满足更好交互体验,资讯内容中富媒体内容逐渐增多,如视频续播、小窗播放、音乐悬浮播放、内容中插入地图、投票等。...更加丰富状态: ReusableNestingScrollview 中,为了满足更复杂需求,如视频加载及自动播放、Gif预加载及自动播放等,我们扩展了组件滚动过程中状态,增加自定义workRange...同时通过3种状态扩展二级缓存,对View不同级别的缓存设置不同策略。...Native维度优化 数据模板分离,资源并行加载 : 基于后台数据以及Native化组件,内容页Html中模板与数据分离,使得全部资源如图片视频等都可以通过Native合适时机异步并行加载

2.9K00

肘子 Swift 周报 #043| 记忆归档和唤醒

席间,众多同学沉浸在对往昔校园生活回忆中,墙上投影播放着由同学精心制作在校时光旧照片剪辑。...本文中,我们将探讨两种不同图片平铺实现方式,并由此引申出一种 SwiftUI 中较少使用 Image 构建方法。...iOS WKWebView 页面与档案资源 Preload 预载 / Cache 缓存研究[9] ZhgChgLi[10] 本文中,ZhgChgLi 探讨了 iOS 开发中使用 WKWebView页面预加载和缓存策略...文章详细介绍了 HTTP 缓存机制,并分析了多种可能加载和缓存方案,包括完善 HTTP 缓存、WKWebView加载、使用 URLProtocol 和 WKURLSchemeHandler 等。...这一限制实际阻碍了持续集成 (CI)环境中进行性能测试可能性。本文中,Alexey Alter-Pesotskiy 探讨了如何克服这一挑战, CI 环境中实现 iOS 性能测试。

8010

WKWebView使用

示例Demo:WKWebView使用 本文将从以下几方面介绍WKWebView: 1、WKWebView涉及一些类 2、WKWebView涉及代理方法 3、网页内容加载进度条实现 4、JS...= YES; // iOS默认为NO,表示是否允许不经过用户交互由javaScript自动打开窗口 preference.javaScriptCanOpenWindowsAutomatically...= YES; config.preferences = preference; // 是使用h5视频播放器在线播放, 还是使用原生播放器全屏播放...config.allowsInlineMediaPlayback = YES; //设置视频是否需要用户手动播放 设置NO则会允许自动播放 config.requiresUserActionForMediaPlayback...涉及代理方法 WKNavigationDelegate :主要处理一些跳转、加载处理操作 // 页面开始加载时调用 - (void)webView:(WKWebView *)webView

2.8K61

Hybrid App 应用 开发中 9 个必备知识点复习(WebView 调试 等)

参考文章:《WKWebView 那些坑》 1. WKWebView 白屏问题 WKWebView 实际是个多进程组件,这也是它加载速度更快,内存暂用更低原因。...解决办法1: WKWebView loadRequest 前, request header 中设置 Cookie, 解决首个请求 Cookie 带不问题; 解决办法2: 通过 document.cookie...WKWebView loadRequest 问题 WKWebView 通过 loadRequest 发起 post 请求 body 数据会丢失,同样是由于进程间通信性能问题, HTTPBody...视频自动播放 WKWebView 需要通过 WKWebViewConfiguration.mediaPlaybackRequiresUserAction 设置是否允许自动播放,但一定要在 WKWebView... Chrome 浏览器上调试 参考文章:《Android调试webview》 1.1 条件: Android 设备或模拟器运行 Android4.4 或更高版本,Android 设备启用

3.1K00

【Hybrid】288- Hybrid App 应用开发中 9 个必备知识点复习

WKWebView 白屏问题 WKWebView 实际是个多进程组件,这也是它加载速度更快,内存暂用更低原因。...WKWebView loadRequest 问题 WKWebView 通过 loadRequest 发起 post 请求 body 数据会丢失,同样是由于进程间通信性能问题, HTTPBody...视频自动播放 WKWebView 需要通过 WKWebViewConfiguration.mediaPlaybackRequiresUserAction 设置是否允许自动播放,但一定要在 WKWebView...这是因为加载 flash 时候,系统会首先把你 WebView 作为父控件,然后该控件绘制 flash ,他想找一个 Activity Context 来绘制他,但是你传入是 ApplicationContext...设备或模拟器运行 Android4.4 或更高版本,Android 设备启用 USB调试模式。

2.3K20

iOS中WebKit框架应用与解析 原

iOS中WebKit框架应用与解析 一、引言         iOS8之前,应用中嵌入网页通常需要使用UIWebView这样一个类,这个类通过URL或者HTML文件来加载网页视图,功能十分有限,只能作为辅助嵌入原生应用程序中...WKWebView:网页渲染与展示,通过WKWebViewConfiguration可以进行配置。 WKWebViewConfiguration:这个类专门用来配置WKWebView。...WebView会共享数据,例如Cookie、用户凭证等,开发者可以通过编写管理类来分配不同维度WebView不同进程池中。...= NO; //设置HTML5视频是否允许网页播放 设置NO则会使用本地播放器 config.allowsInlineMediaPlayback = YES; //设置是否允许...ariPlay播放 config.allowsAirPlayForMediaPlayback = YES; //设置视频是否需要用户手动播放 设置NO则会允许自动播放 config.requiresUserActionForMediaPlayback

1.9K40

Hybrid App 应用开发中 9 个必备知识点复习

WKWebView 白屏问题 WKWebView 实际是个多进程组件,这也是它加载速度更快,内存暂用更低原因。...WKWebView loadRequest 问题 WKWebView 通过 loadRequest 发起 post 请求 body 数据会丢失,同样是由于进程间通信性能问题, HTTPBody...视频自动播放 WKWebView 需要通过 WKWebViewConfiguration.mediaPlaybackRequiresUserAction 设置是否允许自动播放,但一定要在 WKWebView...这是因为加载 flash 时候,系统会首先把你 WebView 作为父控件,然后该控件绘制 flash ,他想找一个 Activity Context 来绘制他,但是你传入是 ApplicationContext...设备或模拟器运行 Android4.4 或更高版本,Android 设备启用 USB调试模式。

2.7K20

Hybrid App 应用开发中 9 个必备知识点复习

WKWebView 白屏问题 WKWebView 实际是个多进程组件,这也是它加载速度更快,内存暂用更低原因。...WKWebView loadRequest 问题 WKWebView 通过 loadRequest 发起 post 请求 body 数据会丢失,同样是由于进程间通信性能问题, HTTPBody...视频自动播放 WKWebView 需要通过 WKWebViewConfiguration.mediaPlaybackRequiresUserAction 设置是否允许自动播放,但一定要在 WKWebView...这是因为加载 flash 时候,系统会首先把你 WebView 作为父控件,然后该控件绘制 flash ,他想找一个 Activity Context 来绘制他,但是你传入是 ApplicationContext...设备或模拟器运行 Android4.4 或更高版本,Android 设备启用 USB调试模式。

2.3K30

WWDC 2022 音视频相关 Session 概览(EDR 相关)丨音视频工程示例

,以支持不同屏幕同时正确显示 SDR 和 HDR 内容。...这些都可以通过 AVPlayerViewController 来实现。不过,如果想要进一步处理视频帧,那就要使用更底层媒体框架来控制整个 pipeline。...本次演讲中会探索 AVPlayer 和相关 AVPlayerLayer 接口使用。 Core Video 是一个数字视频提供管道模型框架。它通过将流程划分为离散步骤来简化处理视频方式。...对于不同应用场景,我们可以选择不同框架来实现: 简单播放 HDR 视频,可以使用 AVKit 和 AVFoundation; 指定 layer 播放 HDR 视频,可以使用 AVPlayerLayer...和 AVPlayerLayer iOS 或 macOS 播放自己视图。

2.4K21

视频H5 video最佳实践

使用AirPlay可以直接从使用iOS设备不同位置播放视频、音乐还有照片文件,也就是说通过AirPlay功能可以实现影音文件无线播放,当然前提是播放终端设备也要支持相应功能 x5-video-player-type...: 启用同层H5播放器,就是视频全屏时候,div可以呈现在视频,也是WeChat安卓版特有的属性。...同层播放别名也叫做沉浸式播放播放时候看似全屏,但是已经除去了control和微信导航栏,只留下"X"和"<"两键。目前同层播放器只Android(包括微信)生效,暂时不支持iOS。...移动端有一些坑需要注意,不要轻易使用媒体元素除ended,timeupdate以外event事件,不同机子可能有不同情况产生,例如:ios下监听canplay和canplaythrough(...就是当第一次播放视频时候ios端,如果网络慢,视频从开始播到能展现画面会有短暂黑屏(处理视频源数据时间),为了避免这个黑屏,可以视频加个div浮层(可以一个假视频第一帧),然后用timeupdate

4.4K30
领券