if (window.WebKitPlaybackTargetAvailabilityEvent) {
// Airplay is available
var video = document.getElementById('video');
video.addEventListener('webkitplaybacktargetavailabilitychanged', function(event) {
if (event.availability === 'available') {
// Airplay receiver is available
var receiverName = event.target.getAttribute('webkitCurrentPlaybackTargetName');
var picker = new WebKitPlaybackTargetPicker();
picker.showPicker(function (receiver) {
// Airplay receiver has been selected
var receiverUrl = receiver.url;
var externalWindow = window.open(receiverUrl);
externalWindow.focus();
}, function () {
console.log('Airplay receiver selection failed');
}, video);
}
});
}
// Function to display HTML content on an external AirPlay-enabled display
function displayOnAirPlay(htmlContent) {
// Call webkitShowPlaybackTargetPicker to allow user to select AirPlay device
webkitShowPlaybackTargetPicker(function(target) {
if (target) {
// If a target device was selected, create a new window and load the HTML content
var externalWindow = target.createRemoteWebView();
externalWindow.loadHTMLString(htmlContent, { baseURL: null });
externalWindow.show();
}
});
}
// usage: display the contents of a div with ID "content" on an external display
var content = document.getElementById("content").innerHTML;
displayOnAirPlay(content);
这是一个HTML内容的工作示例，在所选设备中有一个基本按钮和基本显示内容。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>AirPlay Example</title>
</head>
<body>
<h1>AirPlay Example</h1>
<div id="content">
<p>This is some HTML content that will be displayed on the external AirPlay-enabled display.</p>
</div>
<button id="displayButton">Display on AirPlay</button>
<script>
// Get a reference to the display button and the content div
const displayButton = document.getElementById('displayButton');
const contentDiv = document.getElementById('content');
// Add an event listener to the display button
displayButton.addEventListener('click', async () => {
try {
// Request access to the ExternalOutputContext API
const context = await navigator.externalOutputContext.request();
// Get the list of available external displays
const displays = await context.getDisplays();
// Prompt the user to select an AirPlay-enabled display
const selectedDisplay = await context.showDisplayPicker(displays);
// If a display was selected, create a new window and load the HTML content
if (selectedDisplay) {
const externalWindow = await selectedDisplay.createWindow();
externalWindow.document.body.innerHTML = contentDiv.innerHTML;
externalWindow.show();
}
} catch (error) {
console.error(error);
}
});
</script>
</body>
</html>
1条答案
按热度按时间wwodge7n1#
我不知道您使用什么iOS设备进行测试，但您可以尝试在iOS上使用Safari的WebKit API。
但您必须知道，并非所有Airplay接收器都支持显示HTML内容，因此您可能需要测试不同的接收器，以确定哪些接收器可以与您的应用配合使用。
Safari Webkit的HTML内容示例
这是一个HTML内容的工作示例，在所选设备中有一个基本按钮和基本显示内容。