【问题标题】:Safari Picture In Picture - custom HTML5 video controllerSafari 画中画 - 自定义 HTML5 视频控制器
【发布时间】:2017-01-18 17:04:56
【问题描述】:

带有画中画 (PiP) 的 Safari HTML5 自定义视频控制器

WWDC15上,Apple 推出了 Safari 9(MacOS 的 Safari 10),现在支持画中画。

但是,他们只是说:

如果您使用自定义 HTML5 视频控件,则可以使用 JavaScript 演示模式 API 添加画中画功能。

但不告诉如何或在哪里找到它的文档。

默认的视频控制器有按钮,但是如何通过javascript触发呢?

【问题讨论】:

    标签: javascript safari html5-video picture-in-picture safari10


    【解决方案1】:

    首先,如果您正在寻找在 Chrome 中制作画中画,然后是 see this link


    为您的标记添加画中画元素

    自定义控件现在包含新画中画按钮的标记,默认情况下可见。

    清单 1 此标记添加了一个画中画按钮

    <video id="video" src="my-video.mp4"></video>
    <div id="controls">
        <button id="pipButton">PiP</button>
    </div>
    

    为按钮添加功能

    添加一个函数以使用演示模式 API 中的 webkitSetPresentationMode 属性切换画中画。

    清单 2 此代码使用单击事件侦听器切换画中画。

    var video = document.getElementById('video');
    var PiP = document.getElementById('pipButton');
    
    // picture-in-picture
    if (video.webkitSupportsPresentationMode && typeof video.webkitSetPresentationMode === "function") {
        // Toggle PiP when the user clicks the button.
        PiP.addEventListener("click", function(event) {
            video.webkitSetPresentationMode(video.webkitPresentationMode === "picture-in-picture" ? "inline" : "picture-in-picture");
        });
     } else {
        PiP.disabled = true;
     }
    

    资源


    在行动中。

    var video = document.getElementById('video');
    var PiP = document.getElementById('picture-in-picture');
    
    // picture-in-picture
    if (video.webkitSupportsPresentationMode && typeof video.webkitSetPresentationMode === "function") {
        // Toggle PiP when the user clicks the button.
        PiP.addEventListener("click", function(event) {
                video.webkitSetPresentationMode(video.webkitPresentationMode === "picture-in-picture" ? "inline" : "picture-in-picture");
        });
    } else {
        PiP.disabled = true;
    }
    Only works in Safari 10+<br>
    
    <video controls id="video" x-webkit-airplay="allow" width="320">
      <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">     
    </video>
        
    <div class="controls">
      <button id="picture-in-picture">Picture in Picture</button>
    </div>

    【讨论】:

    • @Toniq 遗憾的是 iPhone 不支持画中画
    • 但是你仍然可以在 video.webkitSupportsPresentationMode 上得到正确的结果。我不想测试iphone,不支持这个功能怎么测试?
    • @Toniq tbh 我从来没有真正想过这个问题。我稍后会回信回复?
    • @Toniq 好的,所以我一直在寻找为什么它仍然在 iPhone 上显示画中画的任何原因,我开始担心这是 IOS 上的 Safari 中的一个错误,因为 iPad 确实支持它而不是iPhone,据我所知,像 Vimeo 这样的网站使用设备检测来防止它在 iPhone 上查看。我已经向 Apple Developer 团队询问过这个问题,我会在得到答复后立即回复他们所说的话
    猜你喜欢
    • 2014-07-16
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-02-23
    • 1970-01-01
    相关资源
    最近更新 更多