Unduh video.js - pengunduhan kode sumber video.js

video.js

Kode sumber lainnya

Unknown

Unduh

Video.js® - Pemutar Video Web

Video.js adalah pemutar video sumber terbuka berfitur lengkap untuk semua platform berbasis web.

Video.js langsung mendukung semua format media umum yang digunakan di web termasuk format streaming seperti HLS dan DASH. Ini berfungsi di desktop, perangkat seluler, tablet, dan Smart TV berbasis web. Ini dapat diperluas dan disesuaikan lebih lanjut dengan ekosistem plugin yang kuat.

Video.js dimulai pada pertengahan tahun 2010 dan sekarang digunakan terus menerus ~~50.000~~ ~~100.000~~ ~~200.000~~ ~~400.000~~ ~~700.000~~ 800.000 situs web.

Daftar isi

Mulai Cepat
Berkontribusi
Kode Etik
Lisensi

Mulai Cepat

Terima kasih kepada orang-orang hebat di Fastly, ada Video.js versi CDN gratis yang dapat digunakan siapa saja. Tambahkan tag ini ke <head> dokumen Anda :

 < 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 >

Alternatifnya, Anda dapat menyertakan Video.js dengan mendapatkannya dari npm, mengunduhnya dari rilis GitHub, atau dengan menyertakannya melalui unpkg atau CDN JavaScript lainnya, seperti CDNjs.

 <!-- unpkg : use the latest version of Video.js -->
< 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 >

<!-- unpkg : use a specific version of Video.js (change the version numbers as necessary) -->
< 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 >

<!-- cdnjs : use a specific version of Video.js (change the version numbers as necessary) -->
< 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 >

Selanjutnya, penggunaan Video.js semudah membuat elemen <video> , namun dengan atribut data-setup tambahan. Minimal, atribut ini harus memiliki nilai '{}' , namun dapat menyertakan opsi Video.js apa pun - pastikan saja atribut tersebut berisi JSON yang valid!

 < 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 >

Saat halaman dimuat, Video.js akan menemukan elemen ini dan secara otomatis menyiapkan pemutar di tempatnya.

Jika Anda tidak ingin menggunakan penyiapan otomatis, Anda dapat mengabaikan atribut data-setup dan menginisialisasi elemen <video> secara manual menggunakan fungsi videojs :

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

Fungsi videojs juga menerima objek options dan panggilan balik untuk dipanggil ketika pemutar sudah siap:

 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?!' ) ;
  } ) ;
} ) ;

Jika Anda siap untuk mendalaminya, halaman Memulai dan dokumentasi adalah tempat terbaik untuk mencari informasi lebih lanjut. Jika Anda mengalami kebuntuan, kunjungi Slack kami!

Berkontribusi

Video.js adalah pustaka sumber terbuka dan gratis, dan kami menghargai bantuan apa pun yang Anda berikan - baik itu memperbaiki bug, menyempurnakan dokumentasi, atau menyarankan fitur baru. Lihat panduan berkontribusi untuk informasi lebih lanjut!

Video.js menggunakan BrowserStack untuk pengujian kompatibilitas.