惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

U
Unit 42
P
Proofpoint News Feed
The Last Watchdog
The Last Watchdog
S
Secure Thoughts
cs.AI updates on arXiv.org
cs.AI updates on arXiv.org
N
News | PayPal Newsroom
Application and Cybersecurity Blog
Application and Cybersecurity Blog
O
OpenAI News
S
Security @ Cisco Blogs
宝玉的分享
宝玉的分享
Hacker News: Ask HN
Hacker News: Ask HN
T
Troy Hunt's Blog
Google Online Security Blog
Google Online Security Blog
WordPress大学
WordPress大学
有赞技术团队
有赞技术团队
TaoSecurity Blog
TaoSecurity Blog
Help Net Security
Help Net Security
Latest news
Latest news
NISL@THU
NISL@THU
S
Security Affairs
博客园_首页
C
CXSECURITY Database RSS Feed - CXSecurity.com
博客园 - 聂微东
AI
AI
www.infosecurity-magazine.com
www.infosecurity-magazine.com
Recent Announcements
Recent Announcements
P
Privacy & Cybersecurity Law Blog
小众软件
小众软件
cs.CV updates on arXiv.org
cs.CV updates on arXiv.org
Hugging Face - Blog
Hugging Face - Blog
博客园 - 司徒正美
AWS News Blog
AWS News Blog
W
WeLiveSecurity
Google DeepMind News
Google DeepMind News
I
InfoQ
Schneier on Security
Schneier on Security
Recent Commits to openclaw:main
Recent Commits to openclaw:main
T
The Exploit Database - CXSecurity.com
IT之家
IT之家
T
Threatpost
Scott Helme
Scott Helme
L
LINUX DO - 热门话题
腾讯CDC
CTFtime.org: upcoming CTF events
CTFtime.org: upcoming CTF events
N
News and Events Feed by Topic
L
LINUX DO - 最新话题
F
Full Disclosure
大猫的无限游戏
大猫的无限游戏
H
Heimdal Security Blog
S
SegmentFault 最新的问题

Mathias Bynens

A horrifying globalThis polyfill in universal JavaScript JavaScript engine fundamentals: optimizing prototypes JavaScript engine fundamentals: Shapes and Inline Caches Asynchronous stack traces: why await beats Promise#then() ECMAScript regular expressions are getting better! Unicode property escapes in JavaScript regular expressions ES2015 const is not about immutability Valid JavaScript variable names in ES2015 Unicode-aware regular expressions in ES2015 Dear Google, please fix plain text emails in Gmail PBKDF2+HMAC hash collisions explained JavaScript has a Unicode problem Processing Content Security Policy violation reports Hiding JSON-formatted data in the DOM with CSP enabled Loading JSON-formatted data with Ajax and xhr.responseType='json' Reserved keywords in JavaScript How to support full Unicode in MySQL databases How to speedrun Dropbox’s Dropquest 2012 Unquoted font family names in CSS Unquoted property names / object keys in JavaScript Valid JavaScript variable names in ES5 CSS character escape sequences JavaScript’s internal character encoding: UCS-2 or UTF-16? The smallest possible valid (X)HTML documents JavaScript character escape sequences JavaScript foo.prototype.bar notation Ambiguous ampersands HTML element + attribute notation How I detect and use localStorage: a simple JavaScript pattern Unquoted attribute values in HTML and CSS/JS selectors The end-tag open (ETAGO) delimiter Using the oninput event handler with onkeyup/onkeydown as its fallback Everything you always wanted to know about touch icons In defense of CSS hacks — introducing “safe CSS hacks” Completing Dropbox’s Dropquest 2011 in 60 seconds Using CSS without HTML How to create simple Mac apps from shell scripts Using setTimeout to speed up window.onload Bulletproof JavaScript benchmarks Thoughts on Safari Reader’s generated HTML How to enable Safari Reader on your site? The XML serialization of HTML5, aka ‘XHTML5’ The id attribute got more classy in HTML5 The three levels of HTML5 usage The HTML5 document.head DOM tree accessor Bulletproof HTML5 <details> fallback using jQuery Displaying hidden elements like <head> using CSS Inline <script> and <style> vs. external .js and .css — what’s the size threshold? Using Showdown/PageDown with and without jQuery
AirPlay video support in iOS Safari — a bookmarklet
Mathias · 2011-02-03 · via Mathias Bynens

AirPlay video support in iOS Safari — a bookmarklet

Published · tagged with HTML, iOS, JavaScript

As you may have heard, the upcoming iOS 4.3 will support AirPlay video streaming in Mobile Safari. Previously video streaming was only available in Apple-controlled iOS applications like the YouTube and iPod/Video apps, but the new iOS 4.3 beta opens up AirPlay support to both third party App Store applications, as well as embedded web videos using either the Quicktime plugin (<embed>) or the <video> element. (Note that AirPlay streaming for <audio> is already available in the current iOS release.)

This is great news. However, if the iOS 4.3 beta is any indication, this new feature is disabled by default (presumably because it’s still in bèta), so to enable it, websites need to add a proprietary x-webkit-airplay attribute with a value of allow to any opening <video> tags.

<video x-webkit-airplay="allow">
	<source src="foo.mp4" type="video/mp4">
	<!-- other sources and fallbacks go here -->
</video>

If you’re still using <embed>, you can just use airplay="allow":

<embed src="foo.mov" airplay="allow"></embed>

It should be possible (I haven’t been able to test this) to unlock this feature on sites that don’t explicitly set these new attributes yet, by using a little bit of JavaScript:

[].forEach.call(document.querySelectorAll('embed, video'), function(el) {
	el.setAttribute('x-webkit-airplay', 'allow');
	el.setAttribute('airplay', 'allow')
});

Here’s the same snippet as a bookmarklet:

javascript:[].forEach.call(document.querySelectorAll('embed,video'),function(e){e.setAttribute('x-webkit-airplay','allow');e.setAttribute('airplay','allow')});

You can just copy and paste that and add it as a bookmark on your iOS device.

Credit to Ben Ward, who tweeted a slightly broken bookmarklet with the same intention.

Update: Now that iOS 4.3 final has been released, it would be cool if someone with an Apple TV could step up and test this. :)

Update: Alex Gibson was kind enough to see if this snippet actually works. Turns out iOS 4.3 will stream the audio from the <video> by default — no attribute magic required — although it does need x-webkit-airplay="allow" to stream the video as well.

The AirPlay icon appears next to the video controls. You can then select an audio output device.

Interestingly, the above bookmarklet doesn’t work, even though the attributes are added to the elements correctly. The only way of getting this to work is by cloning the <video> element after adding the attribute and then re-inserting the copy into the DOM.

Update: As of the first iOS 5 beta, AirPlay is enabled by default for video content in both applications and websites. Yay!

Leave a comment

Comment on “AirPlay video support in iOS Safari — a bookmarklet”

Name *

Email *

Website

Your input will be parsed as Markdown.

Spammer? (Enter ‘no’) *