# การติดตั้งและใช้งานเบื้องต้น

คุณสามารถนำ ByteArk Player ไปใช้บนเว็บไซต์ของคุณได้ โดยการแก้ไขเว็บไซต์ของคุณเพียงเล็กน้อย ดังนี้

เพิ่มแท็ก video ในจุดที่ต้องการแสดงวิดีโอ โดยต้องระบุแอททริบิวต์ class ให้มีค่าเป็น video-js byteark-skin และระบุแอททริบิวต์ id ซึ่งจะใช้อ้างอิงในขั้นตอนถัดๆ ไป ดังตัวอย่าง

(สำหรับแอททริบิวต์อื่น สามารถใส่หรือไม่ใส่ก็ได้)

<video id="video-player-element"
       class="video-js byteark-skin"
       poster="https://www.example.com/path/to/poster.jpg"
       width="854"
       height="480"
       controls
       playsinline
       webkit-playsinline>
</video>

1
2
3
4
5
6
7
8
9

จากนั้น เพิ่มแท็กต่อไปนีภายในแท็ก <body></body> ในส่วนท้ายของหน้า เพื่อนำสคริปท์ของตัวเล่นวิดีโอมาใช้

<script src="//byteark-sdk.cdn.byteark.com/player/v0.3.68/byteark-player.min.js"></script>

จากนั้น เพิ่มสคริปท์ต่อไปนี้หลังจากแท็ก <script></script> ก่อนหน้านี้ เพื่อเปิดใช้งานตัวเล่นวิดีโอ กับแท็ก <video></video> ที่ได้สร้างไว้ในตอนต้น และระบุวิดีโอที่ต้องการจะใช้เล่น ดังนี้

<script>
  var player = byteark('video-player-element', {
    media: {
      title: 'Big Buck Bunny',
      poster: '/assets/samples/player/legacy/images/poster.jpg',
      sources: [{
        src: 'https://byteark-playertzxedwv.stream-playlist.byteark.com/streams/TZyZheqEJUwC/playlist.m3u8',
        type: 'application/x-mpegURL'
      }],
    },
  });
</script>

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

ในการเรียกสคริปท์นี้ ให้เรียกฟังก์ชัน byteark โดยพารามิเตอร์แรก ให้ระบุ id ของแท็กวิดีโอ ที่ได้สร้างไว้ในตอนต้น (ในที่นี้คือ video-player-element) ส่วนพารามิเตอร์ที่สองเป็น object ระบุที่อยู่วิดีโอ และคุณสมบัติของวิดีโอนั้นๆ ดังนี้

# ตัวอย่างซอร์สโค้ด

ตัวอย่าง HTML ของหน้าเว็บที่ใช้ video player ตามขั้นตอนที่อธิบายมาข้างต้นทั้งหมด

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="//byteark-sdk.cdn.byteark.com/player/v0.3.68/byteark-player.min.css">
  </head>
  <body>
    <video id="video-player-element"
           class="video-js byteark-skin"
           poster="https://www.example.com/path/to/poster.jpg"
           width="854"
           height="480"
           controls
           playsinline
           webkit-playsinline>
    </video>
    <script src="//byteark-sdk.cdn.byteark.com/player/v0.3.68/byteark-player.min.js"></script>
    <script>
      var player = byteark('video-player-element', {
        media: {
          title: 'Big Buck Bunny',
          poster: '/assets/samples/player/legacy/images/poster.jpg',
          sources: [{
            src: 'https://byteark-playertzxedwv.stream-playlist.byteark.com/streams/TZyZheqEJUwC/playlist.m3u8',
            type: 'application/x-mpegURL'
          }],
        },
      });
    </script>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

สำหรับการตั้งค่า video player อื่นๆ โปรดดูเพิ่มเติมจากเอกสารอ้างอิง

← ตั้งค่า hls.js การปรับตั้งค่าเบื้องต้น →