iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 21
0
Mobile Development

《菜鳥のSwift》持續30天開發挑戰系列 第 21

《DAY 21》在 App 裡放入 YouTube 影片

  • 分享至 

  • xImage
  •  

今天來記錄如何在 App 裡放入 Youtube 影片,而且不會使用到第三方套件。

新增一個 WebKit View 到 View Controller 上,並拉 Outlet 命名。
https://ithelp.ithome.com.tw/upload/images/20201004/20129680L9kFFk9rIO.png

ViewController.swift 裡要 import WebKit,加入程式如下。

import UIKit
import WebKit

class ViewController: UIViewController {
    
    @IBOutlet weak var webView: WKWebView!
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let urlStr = "https://www.youtube.com/embed/k2xyWuZwZs0?loop=1&playlist=k2xyWuZwZs0&playsinline=1" // 加入參數 playsinline=1 並且勾選 Inline Playback 可讓影片在網頁裡播放
        if let url = URL(string: urlStr) {
            let request = URLRequest(url: url)
            webView.load(request)
        }
        
    }

}
  • 影片網址的格式:https://www.youtube.com/embed/videoId?loop=1&playlist=videoId
    其中 videoId 代表影片的 id,參數 loop 傳入 1 表示重覆播放,參數 playlist 傳入 videoId。

  • 勾選 Inline Playback,並且在影片網址加入參數 playsinline=1,可讓影片在網頁裡播放。
    https://ithelp.ithome.com.tw/upload/images/20201004/20129680WiDpMnYJtG.png

以上步驟做完後執行 App 是會閃退的,因為不認得 WKWebView,照著以下步驟操作。
https://ithelp.ithome.com.tw/upload/images/20201004/20129680Lgn6aY62wK.png

https://ithelp.ithome.com.tw/upload/images/20201004/20129680xEcCTPyZ3K.png

完成如下。
https://ithelp.ithome.com.tw/upload/images/20201004/20129680SJsFiJHZjs.png

如此一來就能在 App 裡播放 YouTube 影片了。


上一篇
《DAY 20》利用 Xib 把做好的畫面重複使用
下一篇
《DAY 22》天啊!Outlet 拉太多!
系列文
《菜鳥のSwift》持續30天開發挑戰30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言