# นำไลฟ์สตรีมขึ้นเว็บไซต์

หลังจากที่ได้มีการทดสอบการส่งสัญญาณ RTMP และสามารถรับชมได้แล้ว คุณสามารถนำไลฟ์สตรีมขึ้นใช้งานในเว็บไซต์ เพื่อให้ผู้ชมสามารถรับชมไลฟ์สตรีมของคุณได้ โดยเลือกใช้วิธีที่เหมาะสม กับรูปแบบการทำงานของคุณดังนี้

การใช้ HTML embdeded iframe (แนะนำ)
การใช้ Video Player Script
การใช้ลิ้งก์ m3u8 เพื่อเล่นในแพลตฟอร์มหรือ Video Player อื่นๆ

# การใช้ HTML embedded iframe (แนะนำ)

HTML embedded iframe คือโค้ดภาษา HTML ที่มีการติดตั้ง Video Player และไฟล์สตรีมพร้อมรับชมไว้แล้ว เพื่อให้คุณสามารถนำไลฟ์สตรีมไปใช้งานในเว็บของคุณได้อย่างรวดเร็ว ตัวอย่างโค้ด HTML ที่คุณได้รับจะเป็นหนึ่ง tag ของ iframe ที่มีการระบุรายละเอียดของไลฟ์สตรีมและขนาดของการแสดงผลไว้แล้ว

ตัวอย่างโค้ด iframe

<iframe 
src="https://byteark-poc-op46iu.cdn.byteark.com/fleetstream/byteark-poc/player" 
width="720" height="480" frameborder="0" allowfullscreen>
</iframe>

1
2
3
4

ข้อดีของการใช้ HTML embeded iframe คือสามารถทำได้ง่ายและไม่ยุ่งยากในทางเทคนิค ในกรณีที่ไม่ได้ต้องการปรับการแสดงผลเป็นพิเศษ ทางไบต์อาร์คขอแนะนำให้ใช้วีธีนี้ในการนำไลฟ์สตรีมขึ้นเว็บไซต์

ขั้นตอนการใช้งาน

ตรวจสอบวิธีแก้ไข HTML ในเว็บไซต์ของคุณและทดสอบว่าคุณสามารถใส่โค้ด HTML ลงในตำแหน่งที่ต้องการได้
นำโค้ด HTML embedded iframe ที่ได้รับไปใส่ในตำแหน่งที่ทดสอบไว้
คุณสามารถปรับขนาดการแสดงผลของกรอบวิดีโอได้โดยการเปลี่ยนขนาด width และ height เป็นตัวเลขที่เหมาะสมกับเว็บไซต์ของคุณ
หลังจากนำโค้ดขึ้นระบบแล้ว สามารถทดสอบการใช้งานโดยเว็บไซต์ของคุณจะมีกรอบการแสดงวิดีโอ ที่จะแสดงผลสัญญาณวิดีโอที่คุณนำขึ้นตามที่กำหนดไว้

# การใช้ Video Player Script

หากคุณต้องการปรับการแสดงผลของเพลเยอร์ให้เหมาะกับเว็บไซต์หรือแพลตฟอร์มของคุณ อาจมีความจำเป็นที่จะต้องใช้โค้ด Video Player โดยตรงกับเว็บไซต์ โดยมีตัวอย่างของการเรียกใช้โค้ดวิดีโอ Player ดังนี้

  <body>
    <div id="the-video-player"></div>
    <script src="//byteark-sdk.cdn.byteark.com/player/v2/byteark-player.min.js"></script>
    <script>
      var player = bytearkPlayer('the-video-player', {
        fluid: true,
        poster: '/assets/samples/player/images/poster-big-buck-bunny.jpg',
        sources: [{
          title: 'Video Title',
          src: 'http://inox.qoder.byteark.com/video-objects/QObeO02cMYWl/playlist.m3u8',
          type: 'application/x-mpegURL'
        }]
      });
    </script>
  </body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

คุณสามารถตรวจสอบรายละเอียดการใช้งาน Video Player อย่างละเอียดได้จากเอกสาร การใช้งาน Video Player

# การใช้ลิ้งก์ m3u8 เพื่อเล่นในแพลตฟอร์มหรือ Video Player อื่นๆ

หากคุณต้องการนำไลฟ์สตรีมไปใช้ในแพลตฟอร์มที่พัฒนาขึ้นเอง โดยต้องการเฉพาะลิ้งก์ของวิดีโอ ให้คุณใช้ลิงค์ HLS ที่มาจาก CDN ของ ByteArk ไปใช้งาน โดยจะมีรูปแบบดังนี้

http://inox.qoder.byteark.com/video-objects/QObeO02cMYWl/playlist.m3u8

# FAQs

อยากทราบวิธีในการนำภาพหน้าปกขึ้น ก่อนจะมีการแสดงผลจริง
การเปิดการแสดงผลจำนวนผู้ชม ณ ปัจจุบัน

← การส่งสัญญาณ RTMP มายังไบต์อาร์ค การให้บริการในวันโปรดักชั่น →