ByteArk Lighthouse Plugin for ByteArk Player SDK iOS

• ByteArk Lighthouse Plugin for ByteArk Player SDK iOS
  • คุณสมบัติ
  • ความต้องการ ของ Plugin
  • การติดตั้ง Plugin
    • CocoaPods (แนะนำ)
    • Swift Package Manager
  • การใช้งาน
    • การใช้งานพื้นฐาน
    • การใช้งานขั้นสูง

คุณสมบัติ

• Integrated ByteArk Lighthouse เข้ากับ ByteArk Player SDK for iOS
• Tracking video analytics
  • Playback events
  • Watch duration
  • Retention
  • อื่นๆ...

ความต้องการ ของ Plugin

• iOS 14 หรือสูงกว่า
• XCode
• Swift 5.5
• ByteArkPlayerSDK version >= 0.2.1
• LighthouseSDK version >= 0.2.13
• (Optional) ByteArkPlayerSDKAdsPlugin version >= 0.1.1

การติดตั้ง Plugin

CocoaPods (แนะนำ)

CocoaPods (opens new window) เป็นเครื่องมือจัดการ dependencies สำหรับโปรเจกต์ Cocoa คุณสามารถติดตั้งได้ด้วยคำสั่งดังนี้:

gem install cocoapods

การติดตั้ง ByteArk Lighthouse Plugin ด้วย Cocoapods

1. รันคำสั่งต่อไปนี้เพื่อเพิ่ม ByteArk Player SDK สำหรับ iOS ลงใน Cocoapods repo

pod repo add byteark-player-sdk-ios-specs https://github.com/byteark/byteark-player-sdk-ios-specs.git

2. แก้ไขไฟล์ Podfile โดยเพิ่มบรรทัดต่อไปนี้ที่จุดเริ่มต้นของไฟล์:

source 'https://github.com/byteark/byteark-player-sdk-ios-specs.git'
source 'https://github.com/byteark/lighthouse-sdk-native-ios-specs.git'

3. เพิ่มบรรทัดต่อไปนี้ลงในไฟล์ Podfile:

pod 'ByteArkPlayerSDKLighthousePlugin', '~> BYTEARK_PLAYER_SDK_LIGHTHOUSE_PLUGIN_VERSION'

Note

แทนที่ BYTEARK_PLAYER_SDK_LIGHTHOUSE_PLUGIN_VERSION ด้วยหมายเลขเวอร์ชันของ ByteArkPlayerSDKLighthousePlugin ที่คุณต้องการใช้

5. รันคำสั่ง pod install ใน Terminal:

pod install

Note

Cocoapods จะติดตั้ง SDK โดยตรงจาก Github private repository โดยใช้ ssh key หากคุณยังไม่ได้ตั้งค่า ssh key ในบัญชี Github ของคุณ โปรดดูเอกสาร Adding a new SSH key to your GitHub account (opens new window) บนเว็บไซต์ของ Github

Swift Package Manager

ใช้ Swift Package Manager เพื่อติดตั้ง Lighthouse Plugin.

1. ใน Xcode ไปที่เมนู File > Add Packages
2. ใส่ URL: https://github.com/byteark/byteark-player-sdk-ios
3. เลือกเวอร์ชันของ Lighthouse Plugin
4. เมื่อเสร็จสิ้น Xcode จะดาวน์โหลดปลั๊กอินโดยอัตโนมัติ

การใช้งาน

การใช้งานพื้นฐาน

import UIKit
import ByteArkPlayerSDK
// Step 1: Import the necessary plugins for Lighthouse integration
import ByteArkPlayerSDKLighthousePlugin
class PlayerViewController: ByteArkPlayerViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        do {
            // Step 2: Create a ByteArkPlayerLighthouseConfig using ByteArkPlayerLighthouseConfigBuilder and set the `projectId`
            let lighthouseConfig = try ByteArkPlayerLighthouseConfigBuilder(projectId: "YOUR_PROJECT_ID")
                .build()
            // Step 3: Create a ByteArkPlayerLighthousePlugin instance using the config from step 2
            let lighthousePlugin = ByteArkPlayerLighthousePlugin(with: lighthouseConfig)
            // Step 4: Set up the media item using ByteArkPlayerItemBuilder
            let item = try ByteArkPlayerItemBuilder()
                        .media(URL(string: "https://byteark-playertzxedwv.stream-playlist.byteark.com/streams/TZyZheqEJUwC/playlist.m3u8")!)
                        .posterImage(URL(string: "https://stream-image.byteark.com/image/video-cover-480p/7/H/7H6hEZrLH.png")!)
                        .mediaId("TZyZheqEJUwC") // set media id
                        .title("Big Buck Bunny")
                        .build()
            // Step 5: Configure the player using ByteArkPlayerConfigBuilder, add the Lighthouse plugin to the config
            let config = try ByteArkPlayerConfigBuilder()
                .item(item)
                .autoplay(true)
                .addPlugin(plugin: lighthousePlugin, name: ByteArkPlayerLighthousePlugin.PluginName) // Adding the Lighthouse plugin
                .build()
            // Step 6: Apply the configuration to the player
            player.configure(with: config)
        } catch {
            print(error.localizedDescription)
        }
    }
}

การใช้งานขั้นสูง

การใช้งานขั้นสูงของ Lighthouse Plugin แบบมี โฆษณา และ playback metadata

import UIKit
import ByteArkPlayerSDK
// Step 1: Import the necessary plugins for Lighthouse integration
import ByteArkPlayerSDKLighthousePlugin
// Step 2: Import the necessary plugins for ads integration
import ByteArkPlayerSDKAdsPlugin
class PlayerViewController: ByteArkPlayerViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        do {
            // Step 3: Create a ByteArkPlayerLighthouseConfig using ByteArkPlayerLighthouseConfigBuilder and set the `projectId`
            let lighthouseConfig = try ByteArkPlayerLighthouseConfigBuilder(projectId: "YOUR_PROJECT_ID")
                .build()
            // Step 4: Create a ByteArkPlayerLighthousePlugin instance using the config from step 3
            let lighthousePlugin = ByteArkPlayerLighthousePlugin(with: lighthouseConfig)
            // Step 5: Set up the ad tag URL for VAST ads
            let adTagUrl = "https://pubads.g.doubleclick.net/gampad/ads?iu=/21775744923/external/vmap_ad_samples&sz=640x480&cust_params=sample_ar%3Dpremidpostpod&ciu_szs=300x250&gdfp_req=1&ad_rule=1&output=vmap&unviewed_position_start=1&env=vp&impl=s&cmsid=496&vid=short_onecue&correlator="
            // Step 6: Create a ByteArkPlayerAdsConfig using ByteArkPlayerAdsConfigBuilder and set the VAST ad tag URL
            let adsConfig = try ByteArkPlayerAdsConfigBuilder(adsTagUrl: adTagUrl).build()
            // Step 7: Create a ByteArkPlayerAdsPlugin instance using the config from step 6
            let adsPlugin = ByteArkPlayerAdsPlugin(with: adsConfig)
            // Step 8: Set up the media item using ByteArkPlayerItemBuilder
            let item = try ByteArkPlayerItemBuilder()
                        .media(URL(string: "https://byteark-playertzxedwv.stream-playlist.byteark.com/streams/TZyZheqEJUwC/playlist.m3u8")!)
                        .posterImage(URL(string: "https://stream-image.byteark.com/image/video-cover-480p/7/H/7H6hEZrLH.png")!)
                        .mediaId("TZyZheqEJUwC") // set media id
                        .title("Big Buck Bunny")
                        .build()
            // Step 9: Create Lighthouse playback metadata
            let playbackMetadataBuilder = PlaybackMetadataBuilder()
            // set user metadata
            playbackMetadataBuilder.userId(value: "user123")
            playbackMetadataBuilder.city(value: "bangkok")
            playbackMetadataBuilder.country(value: "thailand")
            // set video metadata
            playbackMetadataBuilder.videoTitle(value: item.title)
            // set custom metadata
            playbackMetadataBuilder.d1(value: "some custom metadata")
            // set playback metadata to item
            item.lighthousePlaybackMetadata = playbackMetadataBuilder.build()
            // Step 10: Configure the player using ByteArkPlayerConfigBuilder, add the Lighthouse plugin to the config
            let config = try ByteArkPlayerConfigBuilder()
                .item(item)
                .autoplay(true)
                .addPlugin(plugin: lighthousePlugin, name: ByteArkPlayerLighthousePlugin.PluginName) // Adding the Lighthouse plugin
                .addPlugin(plugin: adsPlugin, name: ByteArkPlayerAdsPlugin.PluginName) // Adding the ads plugin
                .build()
            // Step 11: Apply the configuration to the player
            player.configure(with: config)
        } catch {
            print(error.localizedDescription)
        }
    }
}