带有自定义html5控件的Airplay [英] Airplay with Custom html5 controls

问题描述

有人知道是否有办法让Airplay在使用CUSTOM CONTROLS的html5视频上正常工作?那是重要的部分，我意识到，如果您正在使用内置的html5控件，则只需将x-webkit-airplay ="allow"属性添加到该元素.但是我的视频播放器使用了自定义的控件.

Does anyone know if there is a way to get Airplay to work on an html5 video that is using CUSTOM CONTROLS? That is the important part, I realize that you can just add the x-webkit-airplay="allow" attribute to the element if you are using the built in html5 controls. But my video player uses custom built controls.

似乎Safari会将Airplay按钮放在内置的html5控件上，但是如果我不使用内置的控件，有没有办法做到这一点?这是我编写的html5播放器的链接.请注意，底部的控件是我自己的:

It appears that Safari will put the Airplay button on the built in html5 controls, but is there a way to do it if I'm not using the built in controls? Here is a link to the html5 player I've written. Notice that the controls at the bottom are my own:

谢谢！

推荐答案

好消息！该功能已在Safari 9中实现.

Good news here! The feature has been implemented in Safari 9.

Safari 9.0允许您创建具有JavaScript AirPlay支持的HTML5媒体的自定义控件.使用Safari的WebKitPlaybackTargetAvailabilityEvent检测Airplay的可用性，然后添加自己的控件，以将音频和视频流传输到AirPlay设备.

Safari 9.0 allows you to create custom controls for HTML5 media with JavaScript AirPlay support. Use Safari's WebKitPlaybackTargetAvailabilityEvent to detect Airplay availability and then add your own controls for streaming audio and video to AirPlay devices.

通过. Safari的新增功能9

以下是 HTML5视频和AirPlay视频

// Detect if AirPlay is available
// Mac OS Safari 9+ only
if (window.WebKitPlaybackTargetAvailabilityEvent) {
    video.addEventListener('webkitplaybacktargetavailabilitychanged', function(event) {
        switch (event.availability) {
            case "available":
                AirPlayButton.show();
                break;
            default:
                AirPlayButton.hide();
        }
        AirPlayButton.on('click', function() {
            video.webkitShowPlaybackTargetPicker();
        });
    });
}

这篇关于带有自定义html5控件的Airplay的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！