ดาวน์โหลด video.js - ดาวน์โหลด video.js ซอร์สโค้ด

วิดีโอ.js

ซอร์สโค้ดอื่น ๆ

Unknown

ดาวน์โหลด

Video.js® - เครื่องเล่นวิดีโอบนเว็บ

Video.js เป็นเครื่องเล่นวิดีโอโอเพ่นซอร์สที่มีคุณสมบัติครบถ้วนสำหรับแพลตฟอร์มบนเว็บทั้งหมด

Video.js รองรับรูปแบบสื่อทั่วไปทั้งหมดที่ใช้บนเว็บทันทีเมื่อแกะกล่อง รวมถึงรูปแบบการสตรีมเช่น HLS และ DASH ใช้งานได้บนเดสก์ท็อป อุปกรณ์เคลื่อนที่ แท็บเล็ต และสมาร์ททีวีบนเว็บ สามารถขยายและปรับแต่งเพิ่มเติมได้โดยใช้ระบบนิเวศที่แข็งแกร่งของปลั๊กอิน

Video.js เริ่มต้นเมื่อกลางปี 2010 และปัจจุบันมีการใช้ต่อแล้ว ~~50,000~~ ~~100,000~~ ~~200,000~~ ~~400,000~~ ~~700,000~~ 800,000 เว็บไซต์

สารบัญ

เริ่มต้นอย่างรวดเร็ว
มีส่วนร่วม
หลักจรรยาบรรณ
ใบอนุญาต

เริ่มต้นอย่างรวดเร็ว

ต้องขอบคุณทีมงานที่ยอดเยี่ยมของ Fastly ที่ทำให้มี Video.js เวอร์ชันโฮสต์โดย CDN ฟรีที่ใครๆ ก็สามารถใช้ได้ เพิ่มแท็กเหล่านี้ใน ของเอกสารของคุณ :

">

 < link href =" //vjs.zencdn.net/8.19.1/video-js.min.css " rel =" stylesheet " >
< script src =" //vjs.zencdn.net/8.19.1/video.min.js " >  script >

หรือคุณสามารถรวม Video.js ได้โดยรับจาก npm ดาวน์โหลดจาก GitHub รุ่นต่างๆ หรือโดยรวมผ่าน unpkg หรือ JavaScript CDN อื่น เช่น CDNjs

">

 
< link href =" https://unpkg.com/video.js/dist/video-js.min.css " rel =" stylesheet " >
< script src =" https://unpkg.com/video.js/dist/video.min.js " >  script >


< link href =" https://unpkg.com/[email protected]/dist/video-js.min.css " rel =" stylesheet " >
< script src =" https://unpkg.com/[email protected]/dist/video.min.js " >  script >


< link href =" https://cdnjs.cloudflare.com/ajax/libs/video.js/8.19.1/video-js.min.css " rel =" stylesheet " >
< script src =" https://cdnjs.cloudflare.com/ajax/libs/video.js/8.19.1/video.min.js " >  script >

ขั้นต่อไป การใช้ Video.js นั้นง่ายดายพอๆ กับการสร้างองค์ประกอบ แต่มีแอตทริบิวต์ data-setup เพิ่มเติม อย่างน้อยที่สุด แอตทริบิวต์นี้จะต้องมีค่า '{}' แต่สามารถรวมตัวเลือก Video.js ใดก็ได้ เพียงตรวจสอบให้แน่ใจว่ามี JSON ที่ถูกต้อง!

To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video

">

 < video
    id =" my-player "
    class =" video-js "
    controls
    preload =" auto "
    poster =" //vjs.zencdn.net/v/oceans.png "
    data-setup =' {} ' >
  < source src =" //vjs.zencdn.net/v/oceans.mp4 " type =" video/mp4 " >  source >
  < source src =" //vjs.zencdn.net/v/oceans.webm " type =" video/webm " >  source >
  < source src =" //vjs.zencdn.net/v/oceans.ogv " type =" video/ogg " >  source >
  < p class =" vjs-no-js " >
    To view this video please enable JavaScript, and consider upgrading to a
    web browser that
    < a href =" https://videojs.com/html5-video-support/ " target =" _blank " >
      supports HTML5 video
     a >
   p >
 video >

เมื่อโหลดหน้าเว็บ Video.js จะค้นหาองค์ประกอบนี้และตั้งค่าเครื่องเล่นให้แทนที่โดยอัตโนมัติ

หากคุณไม่ต้องการใช้การตั้งค่าอัตโนมัติ คุณสามารถละทิ้งแอตทริบิวต์ data-setup และเริ่มต้นองค์ประกอบ ด้วยตนเองโดยใช้ฟังก์ชัน videojs :

 var player = videojs ( 'my-player' ) ;

ฟังก์ชั่น videojs ยังยอมรับออบเจ็กต์ options และการเรียกกลับที่จะเรียกใช้เมื่อเครื่องเล่นพร้อม:

 var options = { } ;

var player = videojs ( 'my-player' , options , function onPlayerReady ( ) {
  videojs . log ( 'Your player is ready!' ) ;

  // In this context, `this` is the player that was created by Video.js.
  this . play ( ) ;

  // How about an event listener?
  this . on ( 'ended' , function ( ) {
    videojs . log ( 'Awww...over so soon?!' ) ;
  } ) ;
} ) ;

หากคุณพร้อมที่จะเริ่มต้นใช้งานแล้ว หน้าเริ่มต้นใช้งานและเอกสารประกอบคือที่ที่ดีที่สุดในการดูข้อมูลเพิ่มเติม หากคุณติดขัด ตรงไปที่ Slack ของเรา!

มีส่วนร่วม

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

Video.js ใช้ BrowserStack สำหรับการทดสอบความเข้ากันได้