คู่มือการใช้งาน M2F Player Engine

1. สถาปัตยกรรมและ Logic ระบบ (System Architecture)

M2F Player Engine ถูกออกแบบมาให้เป็น Integrated Content Delivery Bridge ที่ทำหน้าที่เชื่อมโยงระหว่างฐานข้อมูลภาพยนตร์ระดับโลก (TMDB), ระบบจัดการทรัพยากรวิดีโอ (Multi-Source Database) และเครือข่ายกระจายข้อมูล (CDN) เข้าด้วยกันอย่างเป็นระบบ เพื่อช่วยลดขั้นตอนที่ยุ่งยากในการจัดการไฟล์และ Metadata ของผู้ดูแลเว็บไซต์ลงกว่า 90%

2. การรองรับอุปกรณ์และเบราว์เซอร์ (Compatibility Matrix)

เราให้ความสำคัญกับ Universal Accessibility เพื่อให้แน่ใจว่าคอนเทนต์ของคุณจะเข้าถึงผู้ชมได้ทุกที่

Desktop & Mobile Browser

• Chromium Engine (Chrome, Edge, Brave): รองรับคุณสมบัติเต็มรูปแบบ รวมถึง Hardware Acceleration เพื่อการถอดรหัสวิดีโอ 4K ที่ลื่นไหล
• Safari (iOS/macOS): ใช้ Native HLS Player ของ Apple ซึ่งประหยัดพลังงานสูงสุดบนอุปกรณ์พกพา
• Firefox: รองรับการเล่นผ่านระบบ MSE (Media Source Extensions) พร้อมการจัดการเสียงที่แม่นยำ

Smart TV & Console

เครื่องเล่นรองรับการทำงานบนเบราว์เซอร์ของ LG (WebOS), Samsung (Tizen) และ Android TV โดยมีการปรับแต่ง UI ให้รองรับการควบคุมผ่าน Remote Control (D-Pad Navigation) ในเบื้องต้น

3. การ Embed ภาพยนตร์ระดับสูง (Advanced Movie Embedding)

การเรียกใช้งานพื้นฐานทำได้ผ่านทางรหัส TMDB ID ซึ่งเป็น Primary Key ในการดึงข้อมูลจาก Server ของเรา

โครงสร้าง URL และความหมาย

เมื่อคุณส่ง Request ไปที่ Endpoint ระบบจะทำการค้นหา Mapping ล่าสุดในฐานข้อมูล หากเป็นหนังใหม่ที่เพิ่งเข้าฉาย ระบบจะพยายามค้นหา Source ที่เสถียรที่สุดให้โดยอัตโนมัติ

ตัวอย่างการใช้งาน iFrame:

4. การจัดการซีรีส์และตอน (TV Series & EP Management)

ระบบซีรีส์ของ M2F ออกแบบมาเพื่อจัดการโครงสร้างข้อมูลที่ซับซ้อน (Multi-Season, Multi-Episode) ได้อย่างมีประสิทธิภาพ

การใช้พรีฟิกซ์ 'tv'

เนื่องจากรหัส ID ของภาพยนตร์และซีรีส์ใน TMDB อาจมีการซ้อนทับกัน (Duplicate ID) การใส่ tv นำหน้า (เช่น id=tv231260) จึงเป็นการยืนยันกับ Engine ว่าให้โหลด Series Manifest แทน Movie Player

* หากไม่ระบุ ss และ ep ระบบจะเริ่มเล่น Season 1 Episode 1 ให้อัตโนมัติ

ตัวอย่างซีรีส์:

5. เจาะลึก Query Parameters (Developer Guide)

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

6. การสร้างธีมและ UI Customization (Theming Guide)

ระบบการสร้างธีมของเราทำงานผ่านระบบ CSS Variables ทำให้การสลับสีทำได้ทันทีโดยไม่ต้องดาวน์โหลดไฟล์ CSS ใหม่

ทำไมต้องเปลี่ยนธีม?

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

1. รายชื่อธีมมาตรฐาน

2. การสร้าง Container ที่สมบูรณ์แบบ

iFrame โดยธรรมชาติจะไม่สามารถคำนวณความสูงตามอัตราส่วนภาพได้เอง แนะนำให้ใช้เทคนิค padding-bottom เพื่อรักษาสัดส่วน 16:9 (Aspect Ratio) ในทุกขนาดหน้าจอ

/* ตัวอย่างการทำ Responsive Wrapper */
.player-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    overflow: hidden;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.player-wrapper iframe {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
}

7. ระบบ Branding และ Anti-Leech (Brand Protection)

เราเข้าใจว่า "แบรนด์" สำคัญสำหรับคุณ ระบบ M2F จึงเปิดโอกาสให้คุณฝังโลโก้ลงในตัววิดีโอผ่าน Layer พิเศษ

กลไกการทำงานของ Persistent Logo

เมื่อเปิดใช้งาน &lg=1 ระบบจะทำการ Override การตั้งค่าจางหายของ UI ทำให้โลโก้ของคุณแสดงผลอยู่ตลอดเวลา สิ่งนี้ช่วยป้องกันการถูก "ขโมยลิงก์" ไปใส่ในเว็บอื่นได้ในระดับหนึ่ง เนื่องจากชื่อเว็บของคุณจะปรากฏอยู่ในทุกวินาทีของการรับชม

• Logo Format: แนะนำไฟล์ PNG พื้นหลังโปร่งใส ขนาดไม่เกิน 200x60px
• Optimization: ควรใช้ไฟล์ที่มีขนาดเล็ก (ไม่เกิน 50KB) เพื่อให้โหลดขึ้นมาได้ทันทีพร้อมเครื่องเล่น

8. กลไก Smart Recovery (Failover Logic)

ปัญหาเรื่อง "หนังเล่นไม่ได้" คือปัญหาอันดับ 1 ของคนทำเว็บหนัง M2F จึงพัฒนาระบบ Fail-Safe ขึ้นมาจัดการโดยเฉพาะ

9. การเชื่อมต่อ WordPress & MasVideo (Professional Integration)

สำหรับการสร้างเว็บไซต์ระดับสเกลใหญ่ การจัดการข้อมูลผ่าน Custom Post Type และ Post Meta คือวิธีที่ยั่งยืนที่สุด

1. การใช้งานร่วมกับ MasVideo

MasVideo เป็น Framework สำหรับวิดีโอที่ทรงพลัง แต่มักจะมาพร้อมกับเครื่องเล่นมาตรฐานที่ไม่ตอบโจทย์พากย์ไทย การเปลี่ยนมาใช้ M2F Engine จะช่วยยกระดับประสบการณ์ผู้ชมได้อย่างมาก

การทำ Mapping ข้อมูล

คุณต้องดึงค่าจาก Meta Key มาตรฐานของ MasVideo มาประกอบเป็น URL สำหรับ iFrame:

• masvideos_tmdb_id : เลขไอดีจากฐานข้อมูลกลาง
• masvideos_tmdb_type : ตัวแปรบ่งชี้ประเภท (movie / tv_series)
• masvideos_video_type : เก็บประเภทว่าเป็น 'movie' หรือ 'tv'

โค้ดการสร้างฟังก์ชันเรียกเล่นในธีม (Functions.php):

function get_m2f_player_url($post_id) {
    $tmdb_id = get_post_meta($post_id, 'masvideos_tmdb_id', true);
    $type = get_post_meta($post_id, 'masvideos_video_type', true); // 'movie' หรือ 'tv'
    
    if (!$tmdb_id) return '';

    // ตรวจสอบความสัมพันธ์: ถ้าเป็น TV Series ให้เติม 'tv' นำหน้า
    $final_id = ($type == 'tv' || $type == 'tv_series') ? 'tv' . $tmdb_id : $tmdb_id;
    
    return "https://player.m2fmovie.com/embed/movie/?id=" . $final_id;
}

2. การเขียน Template สำหรับ Player

ใน WordPress Theme ของคุณ (เช่นไฟล์ single-video.php) ให้ทำการสอดแทรกโค้ดเรียกใช้งานในตำแหน่งที่ต้องการแสดงเครื่องเล่น:

* โค้ดนี้จะดึงค่าอัตโนมัติจากโพสต์ปัจจุบันที่คุณเปิดอยู่

<?php
$player_url = get_m2f_player_url(get_the_ID());

if ($player_url): ?>
    <div class="video-container">
        <div class="player-wrapper">
            <iframe src="<?php echo esc_url($player_url); ?>&lg=1&theme=red" 
                    width="100%" height="100%" frameborder="0" 
                    allowfullscreen scrolling="no"></iframe>
        </div>
        <div class="video-meta">
            <h1><?php the_title(); ?></h1>
            <p>กำลังรับชมผ่านระบบ M2F Engine</p>
        </div>
    </div>
<?php endif; 
?>

10. การขยายความสามารถด้วย ACF (Customization & Flexibility)

ปลั๊กอิน ACF ช่วยให้คุณสร้างอินเตอร์เฟสในหลังบ้าน WordPress เพื่อให้แอดมิน (หรือทีมอัปเดตหนัง) สามารถเลือกปรับแต่งเครื่องเล่นได้ทีละเรื่อง

ตารางฟิลด์ที่แนะนำให้สร้าง

11. การเพิ่มประสิทธิภาพ Performance (Speed Guide)

หน้าเว็บที่มีเครื่องเล่นวิดีโอจำนวนมากอาจทำให้คะแนน Lighthouse ตกได้ เราจึงแนะนำเทคนิคเหล่านี้

The Intersection Observer Strategy

แทนที่จะโหลดเครื่องเล่นทันทีที่เปิดหน้า (ซึ่งจะไปแย่ง Bandwidth ของรูป Poster) ให้คุณใช้ JavaScript ตรวจสอบว่าผู้ใช้เลื่อนหน้าจอมาถึงส่วนของวิดีโอหรือยัง

• Lazy Loading: ใช้ loading="lazy" เสมอ (รองรับในเบราว์เซอร์สมัยใหม่แล้ว)
• Skeleton UI: สร้างกล่องสีเทา (Placeholder) ขนาดเท่าเครื่องเล่นทิ้งไว้ก่อน เพื่อป้องกันปัญหา CLS (Cumulative Layout Shift)
• Pre-connect: ใส่ <link rel="preconnect" href="https://player.m2fmovie.com"> ในส่วน Header ของเว็บคุณ เพื่อทำ DNS Lookup ล่วงหน้า

12. SEO และ Video Schema (Search Visibility)

การทำ SEO สำหรับวิดีโอ (Video SEO) ไม่ใช่เพียงแค่การใส่ Keyword แต่คือการทำให้ Google Bot เข้าใจว่าหน้าเว็บของคุณมีวิดีโอที่เกี่ยวข้อง ซึ่งจะช่วยให้เว็บไซต์ของคุณปรากฏในรูปแบบ Rich Snippets (มีรูปภาพพรีวิววิดีโอในผลการค้นหา) และปรากฏในแท็บ Videos ของ Google Search

1. การทำ Video Structured Data (JSON-LD)

วิธีที่ Google แนะนำมากที่สุดคือการใช้ JSON-LD ร่วมกับ Schema มาตรฐานของ Schema.org/VideoObject โดยคุณควรนำข้อมูลที่ดึงมาจาก TMDB มาใส่ในฟิลด์ต่างๆ ดังนี้:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "VideoObject",
  "name": "[ชื่อหนังภาษาไทย หรือ ชื่ออังกฤษ]",
  "description": "[เรื่องย่อสั้นๆ จาก TMDB]",
  "thumbnailUrl": [
    "https://image.tmdb.org/t/p/w780/[poster_path]",
    "https://image.tmdb.org/t/p/w1280/[backdrop_path]"
  ],
  "uploadDate": "2026-05-15T08:00:00+07:00",
  "duration": "PT1H44M",
  "contentUrl": "https://player.m2fmovie.com/embed/movie/?id=[TMDB_ID]",
  "embedUrl": "https://player.m2fmovie.com/embed/movie/?id=[TMDB_ID]",
  "interactionStatistic": {
    "@type": "InteractionCounter",
    "interactionType": { "@type": "WatchAction" },
    "userInteractionCount": 15420
  }
}
</script>

2. Open Graph Video Tags

เพื่อให้การแชร์ลิงก์ไปยัง Facebook หรือ LINE ดูเป็นมืออาชีพและรองรับการเล่นวิดีโอพรีวิว (ถ้าแพลตฟอร์มอนุญาต) ควรระบุ Meta Tags ดังนี้:

<!-- Open Graph Tags -->
<meta property="og:type" content="video.other" />
<meta property="og:video" content="https://player.m2fmovie.com/embed/movie/?id=1418297" />
<meta property="og:video:secure_url" content="https://player.m2fmovie.com/embed/movie/?id=1418297" />
<meta property="og:video:type" content="text/html" />
<meta property="og:video:width" content="1280" />
<meta property="og:video:height" content="720" />

3. iFrame Accessibility & SEO

แม้ Google จะสามารถอ่านเนื้อหาใน iFrame ได้บ้าง แต่การใส่ title ที่มีความหมายจะช่วยทั้งเรื่อง SEO และ Accessibility สำหรับผู้พิการ:

13. การพัฒนา Mobile WebView (App Integration)

หากคุณกำลังพัฒนาแอปพลิเคชันด้วย React Native, Flutter หรือ Native Swift/Kotlin

สิ่งที่นักพัฒนาแอปต้องระวัง

• Allow Inline Media: ต้องเปิดฟีเจอร์ allowsInlineMediaPlayback บน iOS WebView
• Web Storage: ต้องเปิดใช้งาน DOM Storage เพื่อให้ระบบจดจำเวลาดูค้างไว้ (Resume Play) ทำงานได้
• User-Agent: ไม่ควรแก้ไข User-Agent ของแอปจนจำไม่ได้ เพราะอาจส่งผลต่อการเลือกความละเอียดอัตโนมัติ

14. กลยุทธ์การบริหารจัดการแคช (Caching Strategy)

ระบบของเราใช้ Multi-layer Caching เพื่อให้แน่ใจว่าการตอบสนองจะอยู่ที่ระดับมิลลิวินาที (ms)

• TMDB Metadata: เก็บไว้ 30 วัน (รวมถึงชื่อเรื่องและเรื่องย่อภาษาไทย)
• Video Sources: มีการ Re-validate ทุกๆ 12 ชม. เพื่อป้องกันลิงก์ตาย
• Image CDN: รูปภาพ Poster/Backdrop จะถูกส่งผ่าน Proxy เพื่อลดภาระการโหลดจาก TMDB โดยตรง

15. แนวทางการแก้ไขปัญหา (Troubleshooting)

หากพบความผิดปกติในการแสดงผล ให้ตรวจสอบตามหัวข้อดังต่อไปนี้

1. ปัญหาด้านการเล่น

• เครื่องเล่นขึ้นจอดำ: ตรวจสอบว่า URL ที่ส่งมามีพารามิเตอร์ซ้ำซ้อนหรือไม่ หรือลองทดสอบเปิดใน Incognito Mode เพื่อดูว่ามีส่วนขยาย (Extension) ของเบราว์เซอร์ตัวไหนขัดขวางการทำงาน
• เสียงไม่ตรงกับภาพ: ปัญหานี้มักเกิดจากความเร็วอินเทอร์เน็ตไม่คงที่ ระบบ Adaptive Bitrate จะปรับคุณภาพภาพลงเพื่อรักษาความต่อเนื่องของเสียง

2. ปัญหาด้านการแสดงข้อมูล

• ข้อมูลตอนไม่ขึ้น: ตรวจสอบความถูกต้องของพรีฟิกซ์ tv และหมายเลข Season/Episode