Airplay với các điều khiển html5 tùy chỉnh

Question

Có ai biết liệu có cách nào để Airplay hoạt động trên một video html5 đang sử dụng CUSTOM CONTROLS không? Đó là phần quan trọng, tôi nhận ra rằng bạn chỉ có thể thêm thuộc tính x-webkit-airplay = "allow" vào phần tử nếu bạn đang sử dụng các điều khiển html5 dựng sẵn. Nhưng trình phát video của tôi sử dụng các điều khiển được tạo tùy chỉnh.

Dường như Safari sẽ đặt nút Airplay trên các điều khiển html5 được tạo sẵn, nhưng có cách nào để thực hiện điều đó nếu tôi không sử dụng các điều khiển được tích hợp không? Đây là một liên kết đến trình phát html5 mà tôi đã viết. Chú ý rằng các điều khiển ở phía dưới là của riêng tôi:

http://pluralsight.com/training/Player?author=keith-brown&name=aspdotnet-security&mode=live&clip=0&course=aspdotnet-security

Cảm ơn!

Answer 1

Tin vui ở đây! Tính năng này đã được triển khai trong Safari 9.

Safari 9.0 cho phép bạn tạo điều khiển tùy chỉnh cho phương tiện HTML5 với hỗ trợ JavaScript AirPlay. Sử dụng số WebKitPlaybackTargetAvailabilityEvent của Safari để phát hiện tính khả dụng của Airplay và sau đó thêm các điều khiển của riêng bạn để phát trực tuyến âm thanh và video cho các thiết bị AirPlay.

Via. What's New in Safari 9

Dưới đây là một ví dụ từ HTML5 video и кнопка для 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(); 
     }); 
    }); 
} 

Answer 2

Đáng buồn là Apple đã không thực hiện các cuộc gọi sự kiện JavaScript Airplay, điều này chủ yếu là do khi bạn sử dụng AirPlay trong điều khiển thời gian chạy gốc của mình, AirPlay sẽ nhắc người dùng gần bằng thiết bị AirPlay. Hiện tại, không có triển khai JS cụ thể cho Safari để lấy dữ liệu này trong nội dung của bạn và tạo các nút dựa trên những gì có sẵn.

Kể từ tháng 2 năm 2013, điều duy nhất bạn có thể chỉ định cho AirPlay trong HTML5 là nếu bạn muốn hiển thị hoặc không hiển thị các điều khiển AirPlay.

https://developer.apple.com/library/safari/#documentation/AudioVideo/Conceptual/AirPlayGuide/OptingInorOutofAirPlay/OptingInorOutofAirPlay.html

Bạn có thể báo cáo lỗi với Apple nếu đây là một tính năng mà bạn muốn trong phiên bản tương lai: https://bugreport.apple.com/

Hope this helps.

Answer 3

Chúng tôi có thể kiểm tra sự kiện webkitcurrentplaybacktargetiswirelesschanged để bắt tắt thiết bị phát sóng:

 this.on(videoEl, 'webkitcurrentplaybacktargetiswirelesschanged', this.checkWireles);