使用 iOS 11 在 WKWebView 中自动播放 YouTube 视频答案

【问题标题】：Autoplay YouTube videos in WKWebView with iOS 11使用 iOS 11 在 WKWebView 中自动播放 YouTube 视频
【发布时间】：2018-05-09 05:02:36
【问题描述】：

我想在我的应用中安装小型 YouTube 播放器。我发现被推荐的唯一方法是将带有 YouTube 播放器的网页嵌入到我的应用程序中。所以我使用了 WKWebView 并加载了带有 autoplay 参数的嵌入 YouTube 播放器页面：https://www.youtube.com/embed/VUbsFtLkGN8?autoplay=1.

代码如下：

let webConfiguration = WKWebViewConfiguration()
let webView = WKWebView(frame: .zero, configuration: webConfiguration)
let youtubeURL = URL(string: "https://www.youtube.com/embed/VUbsFtLkGN8?autoplay=1")
webView.load(URLRequest(url: youtubeURL!))

此嵌入播放器 url 在桌面版 Safari 中自动播放，但在移动版 Safari 或 WKWebView 中不会自动播放。我可以强制 WKWebView 以某种方式自动播放视频吗？还是使用其他 YouTube 播放器网址？

【问题讨论】：

Apple 没有阻止视频自动播放吗？
是的，在 Safari 中，但我认为您应该能够在您的应用中自动播放。
找到解决方案了吗？

标签： ios swift youtube wkwebview

【解决方案1】：

var youTubeVideoHTML: String = "<!DOCTYPE html><html><head><style>body{margin:0px 0px 0px 0px;}</style></head> <body> <div id=\"player\"></div> <script> var tag = document.createElement('script'); tag.src = \"http://www.youtube.com/player_api\"; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); var player; function onYouTubePlayerAPIReady() { player = new YT.Player('player', { width:'%0.0f', height:'%0.0f', videoId:'%@', events: { 'onReady': onPlayerReady, } }); } function onPlayerReady(event) { event.target.playVideo(); } </script> </body> </html>"

func playVideoWithId(videoId: String) {
  var html: String = String(format: youTubeVideoHTML, self.frame.size.width, self.frame.size.height, videoId)


}

或者你可以使用的替代方法

YTPlayer For Playing Youtube Video

【讨论】：

代码不完整，也不自动播放。
YTPlayer 库似乎不再维护了。

【解决方案2】：

自上一个答案以来，iframe API 似乎发生了变化。我已经根据iframe API Reference 更新了在WKWebView 中加载的HTML。使用此代码，我设法在 iOS11 上的 WKWebView 中全屏自动播放 YouTube 视频。

class YouTubeVideoPlayerVC: UIViewController {

    @IBOutlet weak var videoPlayerView: WKWebView!
    var videoURL:URL!  // has the form "https://www.youtube.com/embed/videoID"
    var didLoadVideo = false

    override func viewDidLoad() {
        super.viewDidLoad()
        videoPlayerView.configuration.mediaTypesRequiringUserActionForPlayback = []
    }

    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()
        // Size of the webView is used to size the YT player frame in the JS code 
        // and the size of the webView is only known in `viewDidLayoutSubviews`, 
        // however, this function is called again once the HTML is loaded, so need 
        // to store a bool indicating whether the HTML has already been loaded once
        if !didLoadVideo {
            videoPlayerView.loadHTMLString(embedVideoHtml, baseURL: nil)
            didLoadVideo = true
        }
    }

    var embedVideoHtml:String {
        return """
        <!DOCTYPE html>
        <html>
        <body>
        <!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
        <div id="player"></div>

        <script>
        var tag = document.createElement('script');

        tag.src = "https://www.youtube.com/iframe_api";
        var firstScriptTag = document.getElementsByTagName('script')[0];
        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

        var player;
        function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
        height: '\(videoPlayerView.frame.height)',
        width: '\(videoPlayerView.frame.width)',
        videoId: '\(videoURL.lastPathComponent)',
        events: {
        'onReady': onPlayerReady
        }
        });
        }

        function onPlayerReady(event) {
        event.target.playVideo();
        }
        </script>
        </body>
        </html>
        """
    }
}

【讨论】：

你能帮我解答这个问题吗stackoverflow.com/questions/55377677/…

【解决方案3】：

对于小型 Youtube MediaPlayer，您可以申请：-

YourVideoView.configuration.allowsInlineMediaPlayback = true

您也可以通过 InLine Playback 上的选中按钮从情节提要中执行此操作

【讨论】：

对于自动播放，在上面的截图中取消选中For Video PlaybackInteraction。

【解决方案4】：

Xamarin 版本

-这可以添加到视图中确实加载（硬编码高度）。我还为 playerVars 添加了“rel”，以仅显示我频道的相关视频。

WKWebview 是动态创建并添加到容器中的。这个想法是让 iframe 填充 WKWebView 和 WKWebView 填充容器。我永远无法将高度设置为 100%，因此它会根据设备进行缩放，但似乎硬编码的 640 高度适用于大多数设备。

我还将 youtube id 直接传递到一个变量中，该变量基本上是 videoURL.lastPathComponent 返回的。自动播放工作正常，这是该线程的主要解决方案。

var wkWebConfig = UIDevice.CurrentDevice.CheckSystemVersion(10, 0)
                    ? new WKWebViewConfiguration
                    {
                        MediaTypesRequiringUserActionForPlayback = WKAudiovisualMediaTypes.None
                    }
                    : new WKWebViewConfiguration
                    {
                        MediaPlaybackRequiresUserAction = false
                    };

            _wkYoutubePlayer = new WKWebView(new CGRect(), wkWebConfig)
            {
                AccessibilityIdentifier = "viewPlayerYouTube",
                TranslatesAutoresizingMaskIntoConstraints = false
            };

            viewPlayerContainerYouTube.AddSubview(_wkYoutubePlayer);

            NSLayoutConstraint.Create(_wkYoutubePlayer, NSLayoutAttribute.Top, NSLayoutRelation.Equal, viewPlayerContainerYouTube, NSLayoutAttribute.Top, 1, 0).Active = true;
            NSLayoutConstraint.Create(_wkYoutubePlayer, NSLayoutAttribute.Leading, NSLayoutRelation.Equal, viewPlayerContainerYouTube, NSLayoutAttribute.Leading, 1, 0).Active = true;
            NSLayoutConstraint.Create(_wkYoutubePlayer, NSLayoutAttribute.Trailing, NSLayoutRelation.Equal, viewPlayerContainerYouTube, NSLayoutAttribute.Trailing, 1, 0).Active = true;
            NSLayoutConstraint.Create(_wkYoutubePlayer, NSLayoutAttribute.Bottom, NSLayoutRelation.Equal, viewPlayerContainerYouTube, NSLayoutAttribute.Bottom, 1, 0).Active = true;

            var html = $"<!DOCTYPE html><html><body><div id=\"player\"></div><script>var tag = document.createElement('script');tag.src = \"https://www.youtube.com/iframe_api\";var firstScriptTag = document.getElementsByTagName('script')[0];firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);var player;function onYouTubeIframeAPIReady() {{ player = new YT.Player('player', {{ height: '640', width: '100%', videoId: '{_youtubeVideoId}', playerVars: {{ rel: '0' }}, events: {{ 'onReady': onPlayerReady }} }}); }} function onPlayerReady(event) {{ event.target.playVideo(); }}</script></body></html>";
            _wkYoutubePlayer.LoadHtmlString(html, null);

【讨论】：

【解决方案5】：

let videoView = UIView(frame: CGRect(x: 0, y: 80, width: self.view.frame.width, height: self.view.frame.height - 80))
            self.view.addSubview(videoView)

let youTubeVideoHTML: String = "<!DOCTYPE html><html><head><style>body{margin:0px 0px 0px 0px;}</style></head> <body> <div id=\"player\"></div> <script> var tag = document.createElement('script'); tag.src = \"https://www.youtube.com/player_api\"; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); var player; function onYouTubePlayerAPIReady() { player = new YT.Player('player', { width:'%0.0f', height:'%0.0f', videoId:'%@', events: { 'onReady': onPlayerReady} }); } function onPlayerReady(event) { event.target.playVideo(); } </script> </body> </html>"

let html: String = String(format: youTubeVideoHTML, videoView.frame.width, videoView.frame.height, id)


let webConfiguration = WKWebViewConfiguration()
if #available(iOS 9.0, *) {

     webConfiguration.allowsAirPlayForMediaPlayback = true
     webConfiguration.allowsInlineMediaPlayback = true
     webConfiguration.allowsPictureInPictureMediaPlayback = true
     webConfiguration.mediaTypesRequiringUserActionForPlayback = []

}

webView = WKWebView(frame: CGRect(x: 0, y: 0, width: videoView.frame.width, height: videoView.frame.height), configuration: webConfiguration)
webView.uiDelegate = self
webView.scrollView.isScrollEnabled = false
webView.scrollView.zoomScale = 0
webView.isMultipleTouchEnabled = false
webView.scrollView.isPagingEnabled = false
webView.scrollView.isMultipleTouchEnabled = false
videoView.addSubview(webView)

webView.loadHTMLString(html, baseURL: URL(string: "https://www.youtube.com"))

【讨论】：