在 Safari 浏览器中使用群组活动协调媒体播放

创建可供用户在网页和您的配套 app 中享受的 SharePlay 体验。了解如何将群组活动框架与配套网站结合使用，将 SharePlay 引入 Safari 浏览器，让人们即使尚未从 App Store 下载您的 app，也能相互联系进行愉快的群组互动。

资源

相关视频

WWDC21

下载

♪ （利用GroupActivities 在Safari中播放共享视频）大家好我是杰瑞我从事媒体播放组件相关工作在苹果公司的 WebKit和Safari部门工作人们喜欢聚在一起看他们最爱的节目和电影一起听最爱的歌无论他们是否呆在一起是在隔壁还是分隔在地球两端现在有了 GroupActivities 这给您的用户提供了比以往更方便的SharePlay体验不管他们身在何处在这一课程中我们有四个主题首先介绍Safari的共享播放功能然后是如何让您的iOS应用和 Safari上的SharePlay一起使用接着是如何在您的应用网页上接入 Media Session API 最后是如何跨多个设备给共享播放建立一个新的Web API 现在我们先来探讨SharePlay 和Safari 在之前的课程中您已了解如何在您的iPhone和iPad应用中利用GroupActivities 打造美妙的SharePlay体验在macOS Monterey上您可以把同样的体验与您的iPhone 和iPad应用一起通过Catalyst移植到Mac上如果您的应用程序有配套网站您可以分享同样美妙的 SharePlay体验给您Mac Safari 15的用户这些用户无需从App Store 下载您的应用这就是我要在本课程中向您展示的我在研发一个iPhone应用是用来看电影预告片的我已经在我的应用中加入了对GroupActivities的支持这样我的朋友们就可以通过FaceTime 一起观看电影预告片了但我的电影预告片应用还有一个配套网站接着来就为您展示我在该网站中加入对GroupActivities 的支持后是什么样子的我在和我的朋友山姆用FaceTime通话山姆喜欢看电影预告片所以我让他们帮我测试这个新的电影预告片应用我们通话期间当他们开始在该应用上播放新预告片我就会收到被邀请观看那个预告片的通知我可以选择是否加入Safari上的会话当我点击那个通知 Safari便会使用共享内容的URL启动当山姆开始播放预告片在Safari上也会同时播放我可以暂停播放甚至可以在Safari上搜索视频会话中的其他人都能看到同样的指令在他们本机的视频中同时显示这真的是棒极了那么要如何将对 GroupActivities的支持添加到电影预告片的网站上？在我们看Safari的后台之前也就是新的Web API 在Safari 15上可用之前让我们先谈谈如何让您的应用能够通过GroupActivities使用Safari 为了能加入Safari的 GroupActivities会话 iPhone或 iPad应用用户需要创建一个 GroupSessionActivity 带有指向您网站的fallbackURL 这个fallbackURL 不仅必须要识别出您的网站还要识别出要播放的特定内容当一位iPhone用户发送了一同观看的邀请给一位Mac用户 Safari会启动并被要求加载您在GroupSessionActivity提供的URL 一旦fallbackURL 在Safari上加载您的网站就需要执行一些简单但很重要的Web API 首先是Media Session Media Session是标准的Web API 让您的站点能告诉浏览器也就是Safari 更多关于媒体播放在您网页中的当前状态您的站点可以告诉浏览器当前的播放状态和内容的持续时间它可以为现在播放的内容提供插图甚至可以告诉浏览器现在的内容是广告可以跳过一旦浏览器有了这些元数据便可以将元数据提供给操作系统的其他组件并在自身的浏览器窗口之外把它呈现给用户操作系统显示数据的一个地方叫做Now Playing Now Playing可以很好地让用户快速查看和控制他们正在观看的视频在iOS中用户可以轻松进入 Now Playing 从控制中心和锁屏界面都可以现在在macOS Monterey中用户可以直接从菜单栏进入 Now Playing Safari会用到的信息由Media Session提供用来填入Now Playing 包括内容标题持续时长播放状态插图等等 Now Playing还允许用户控制播放他们正在收听的内容通过给用户显示的一组简单的播放控件即可实现您的站点可以在 Media Session注册以便具体执行操作让用户与 Now Playing实现互动举个例子当用户轻击Now Playing 的播放按键 Safari会运行您站点上的操作处理程序来开始视频播放 Media Session让您的站点可完全控制将哪些元数据向浏览器公开并且还能控制如何执行播放命令需要在开始播放前做些设置和预检工作？没问题有了Media Session的播放操作处理程序便可轻松实现如果您的站点预先采用了Media Session 那么您就已经成功了一半但电影预告片网站还未采用Media Session 所以现在我们来为其添加支持这个站点需要添加播放暂停和搜索等操作为此我们要用到 mediaSession属性中的navigator 首先来添加播放的操作处理程序我们会调用 mediaSession.setActionHandler() 传递字串play 以及在我们的视频要素中调用play()的内联函数然后暂停和搜索也采用同样的方式为了确保我们准确地在浏览器中显示出了播放状态我们要添加事件监听器到视频要素中并且在状态发生变化时刷新mediaSession 首先要添加一个函数叫做updateMediaSessionState() 它会查询视频要素来识别它是在播放还是暂停然后它会将mediaSession中的 playbackState属性设置成字串 playing或paused 具体取决于视频要素的播放状态下一步它会查询视频要素的持续时长播放速度和当前时间然后利用这些取值它会调用mediaSession的 setPositionState()函数在dictionary参数中传递这些取值之后加入事件监听器来监测这些取值的变化并调用updateMediaSessionState() 用这些新数值去更新mediaSession 我们需要事件监听器来监测播放暂停时长变化速度变化及时间变化最后因为这个电影预告片网站不仅有标题字串还有标题插图的URL 我们可以将Media Session的元数据属性设置成包括这些数值的新MediaMetadata对象来试试看吧我会在Safari刷新我的页面然后开始播放点击系统菜单中的 Now Playing图标我在Now Playing面板中看到了标题和插图当我轻击暂停按钮暂停操作处理程序会被调用即可暂停播放 Media Session属于基本的构成要素让网页实现了共同观看的体验它给浏览器提供了一个机制告诉网页该开始还是该停止播放了接下来我们讨论第二个主题在网页中打造共同观看体验：在会话中跨不同设备实现同步播放为此我们扩展了 Media Session 加入了新的属性 Coordinator 您的网页会用到 Media Session的Coordinator 来告知会话中的每位用户网页的意图是开始还是停止播放还是搜索视频时间轴上的具体时刻还是跳到播放列表中的下一项 Coordinator会与会话中的所有其它设备沟通其意图并监听所有其它设备播放状态的变化解决冲突并等待每位用户准备好开始播放当大家都准备好 Coordinator会用我们之前添加的 Media Session操作处理程序来开始播放和会话中的其他用户同时进行如果另一位用户因为某些原因停止播放 Coordinator会调用您Media Session 的暂停操作处理程序尽管如此我还是要指出一些注意事项 Coordinator接口是一个实验性的Web API 还没有经过规范化当有进程可能要改进此API时这个API的某些方面可能会发生改变如果想进一步了解请观看W3C的 Media Session GitHub网页这个API目前只在 Safari上使用虽然GroupActivities框架就是Safari用来执行 Coordinator的框架可以并且我们也希望能被其它Mac浏览器采用最后的注意事项是当您的用户加入 Safari的一个现有会话当前的小组会话必须是由 iPhone iPad或 macOS应用发起的所以现在就加入 Coordinator支持吧一旦加入支持我首先要做的就是加入会话所以我要将 coordinatorchange事件监听器加入到mediaSession中在处理程序中如果有非空的 coordinator属性在meidaSession中我就会调用它的join()函数我还想在我的控件中加入一个图标来展示我们正在会话中播放视频所以在处理程序中是否会显示图标取决于是否有 coordinator属性在mediaSession中我还会为这个图标连接一个可点击的事件监听器来调用coordinator 中的leave() 下一步我要修改事件处理程序来设置我的自定义控件以检查coordinator的存在如果存在则转而调用对应的 coordinator函数我会给我的播放按钮暂停按钮和进度条各添加一个控件来看看它的实际效果吧我从朋友山姆那里收到了邀请我准备接受邀请我的网页加载的内容和山姆的iPhone上看到的一样当我点击播放按钮山姆的iPhone 和我的网页开始同步播放我们到那儿的路线是一场冒险我很害怕如果你没有这种感觉就不能称之为一场冒险了 ♪ 这太棒了既然预告片播完了山姆使用iPhone 把进度条拉回开头

我们认为用户会喜欢在应用中一起观看或者收听他们最爱的内容无论他们用的是iPhone iPad Apple TV 还是在他们的Mac上运行的Safari 我们希望您现在能够给您的所有用户带来这样的体验不管他们身在何处更多关于 GroupActivities API的信息可以观看以下课程《利用GroupActivities 播放共享视频》以及《GroupActivities的设计》如果您对其它可用于Safari 15的新Web API感兴趣可以观看以下课程《开发高级的网页内容》感谢观看请继续观看其它WWDC21课程 ♪

2:50 - Preparing your app

struct WatchTogether: GroupActivity {

    var contentIdentifier: String

    func metadata() async -> GroupActivityMetadata {
        var metadata = ActivityMetadata()
        metadata.fallbackURL = URL(string: "https://example.com/title/\(contentIdentifier)")
        return metadata
    }
}

5:29 - Adopting Media Session

if (navigator.mediaSession) {
    navigator.mediaSession.setActionHandler('play', () => video.play() );
    navigator.mediaSession.setActionHandler('pause', () => video.pause() );
    navigator.mediaSession.setActionHandler('seekto', details => {
        video.currentTime = details.seekTime;
    });
}

let updateMediaSessionState = function() {
    if (!navigator.mediaSession)
        return;
    let playbackState = video.paused ? 'paused' : 'playing';
    navigator.mediaSession.playbackState = playbackState;

    let positionState = { video.duration, video.playbackRate, video.currentTime };
    navigator.mediaSession.setPositionState(positionState);
};

for (var event of ['playing', 'pause', 'durationchange', 'ratechange', 'timechange'])
    video.addEventListener(event, updateMediaSessionState);

navigator.mediaSession.metadata = new MediaMetadata({
    title: myPlayer.titleString,
    artwork: [{ src: myPlayer.artworkURL }]
});

9:32 - Adopting Coordinator

navigator.mediaSession.addEventListener('coordinatorchange', coordinator => {
    if (coordinator)
        coordinator.join();
    controls.inSessionIcon.style.hidden = !coordinator;
});

controls.inSessionIcon.addEventListener('click', event => {
    let coordinator = navigator.mediaSession.coordinator;
    if (coordinator && coordinator.state == 'joined')
        navigator.mediaSession.coordinator.leave();
});

controls.playButton.addEventHandler('click', event => {
    if (navigator.mediaSession.coordinator)
        navigator.mediaSession.coordinator.play();
    else
        video.play();
});
controls.pauseButton.addEventHandler('click', event => {
    if (navigator.mediaSession.coordinator)
        navigator.mediaSession.coordinator.pause();
    else
        video.pause();
});
controls.timeline.addEventHandler('onchange', event => {
    if (navigator.mediaSession.coordinator)
        navigator.mediaSession.coordinator.seekTo(event.target.value);
    else
        video.currentTime = event.target.value;
});

正在查找特定内容？在上方输入一个主题，就能直接跳转到相应的精彩内容。