普通网站检测浏览器是否支持格式在webkit中的实现方式

本文介绍了HTML5中video标签的canPlayType属性如何用于判断浏览器是否支持特定的媒体类型。通过WebKit源代码示例说明了canPlayType方法的具体实现过程。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在优酷网站中如果对应某个属性不支持就会报出错误说不支持

在html5 video的使用过程中也是存在这样的问题

video标签包含一个

canPlayType属性,这个可以判断你浏览器内部是否支持某一属性。

对应到webkit的代码中就是:
String HTMLMediaElement::canPlayType(const String& mimeType) const
{
    MediaPlayer::SupportsType support = MediaPlayer::supportsType(ContentType(mimeType));
    String canPlay;

    // 4.8.10.3
    switch (support)
    {
        case MediaPlayer::IsNotSupported:
            canPlay = "";
            break;
        case MediaPlayer::MayBeSupported:
            canPlay = "maybe";
            break;
        case MediaPlayer::IsSupported:
            canPlay = "probably";
            break;
    }
    
    return canPlay;
}

根据webkit本身的语法规定是存在idl文件与之想对应

DOMString canPlayType(in DOMString type);


以下是具体的调用的backtrace:

#0  WebCore::MediaPlayerPrivate::supportsType (type=@0x4ef7c524, codecs=@0x4ef7c520) at external/webkit/WebKit/android/WebCoreSupport/MediaPlayerPrivateAndroid.cpp:547
#1  0xa83f9a40 in chooseBestEngineForTypeAndCodecs (type=<value optimized out>, codecs=<value optimized out>) at external/webkit/WebCore/platform/graphics/MediaPlayer.cpp:197
#2  0xa83f9cca in WebCore::MediaPlayer::supportsType (contentType={m_type = {m_impl = {<WTF::FastAllocBase> = {<No data fields>}, m_ptr = 0xa517b8}}})
    at external/webkit/WebCore/platform/graphics/MediaPlayer.cpp:565
#3  0xa838c9dc in WebCore::HTMLMediaElement::canPlayType (this=<value optimized out>, mimeType=<value optimized out>) at external/webkit/WebCore/html/HTMLMediaElement.cpp:418
warning: (Internal error: pc 0xa85a660f in read in psymtab, but not in symtab.)
#4  0xa85a6610 in canPlayTypeCallback (args=<value optimized out>)
    at out/debug/target/product/newbox/obj/STATIC_LIBRARIES/libwebcore_intermediates/WebCore/bindings/V8HTMLMediaElement.cpp:317
warning: (Internal error: pc 0xa85a660f in read in psymtab, but not in symtab.)
#5  0xa8610d96 in HandleApiCallHelper<false> (args={<v8::internal::Arguments> = {length_ = 3, arguments_ = 0x4ef7c60c}, <No data fields>}) at external/v8/src/builtins.cc:783
#6  0xa8610df0 in Builtin_HandleApiCall (args={<v8::internal::Arguments> = {length_ = 3, arguments_ = 0x4ef7c60c}, <No data fields>}) at external/v8/src/builtins.cc:800
#7  0x44a72234 in ?? ()

与此类似的flash的npnpi的方式也又对应的类型检查




在Web前端实现移动配置(Mobile Config)文件在Safari浏览器的自动识别和安装,通常需要借助苹果的插件技术,尤其是`apple-app-site-association` (Association Domains) 和 `WKWebView`。以下是基本步骤: 1. 创建`apple-app-site-association`文件(`.json`格式):这个文件包含应用程序的URLs和它们对应的应用程序ID。这告诉Safari哪些网站应该被视为特定应用的一部分。示例内容如下: ```json { "applinks": { "apps": [], "details": [ { "appID": "your.app.id", "paths": ["/path/*"] } ] } } ``` 2. 将此文件上传到服务器并与您的网站关联的URL一起提供(例如:`https://yourdomain.com/apple-app-site-association`)。 3. 使用WKWebView(WebKit版的WebView)替代普通HTML渲染:WKWebView支持`WKWebViewConfiguration`,其中可以设置`WKUserContentController`来处理自定义JavaScript行为。通过JavaScript,您可以监听特定事件(如页面加载完成),然后尝试检测是否是苹果设备并检查`apple-app-site-association` 文件的存在。 4. JavaScript 代码示例: ```javascript if (window.navigator.standalone && window.MutationObserver) { const observer = new MutationObserver((mutationsList) => { mutationsList.forEach((mutation) => { if (mutation.type === 'childList') { // 检查apple-app-site-association文件是否存在 fetch('https://yourdomain.com/apple-app-site-association').then((response) => { if (response.ok) { // 应用安装脚本或其他操作... } else { console.error('Failed to load Mobile Config'); } }); } }); }); // 观察body变化 observer.observe(document.body, { childList: true }); } ``` 5. 需要注意的是,为了触发自动安装,用户必须先访问过含有`apple-app-site-association`文件的网页,并在Safari设置中将该站点添加到“允许从此网站安装”的列表中。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值