一，Web視頻播放器插件

一個好的播放器需要滿足以下需求： 1. 支持所有主流瀏覽器（兼容性保障） 2. 用戶能與播放器交互，播放器必須提供必要的API，比如播放，暫停，停止，拖動，倍速播放，片源切換 3. 可定制外觀，方便后期擴展，UI定制化保障不同的用戶自定義 4. 支持flv、mp3、mp4格式，支持播放列表 5. 詳盡的幫助文檔說明，方便開發者使用 二、播放器插件舉例 1、videoJS： videojs是一個兼容html5的視頻播放工具，早期版本兼容所有瀏覽器，方法是：提供三個后綴名的視頻，并在不支持html5的瀏覽器下生成一個flash的版本。 最新的3.1.0版本優化了之前的做法，只需要提供兩個格式的視頻，頁面制作起來更加方便，只有兩步走： 1、引用腳本，videojs很為你著想，直接cdn了，你都不需要下載這些代碼放入自己的網站 <link href=”http://vjs.zencdn.net/c/video-js.css” rel=”stylesheet”> <script src=”http://vjs.zencdn.net/c/video.js”></script> 2、頁面中使用方式： （1）直接在HTML中設置屬性 <video id=”my_video_1″ class=”video-js vjs-default-skin” controls preload=”auto” width=”640″ height=”264″ poster=”my_video_poster.png” data-setup=”{}”> <source src=”my_video.mp4″ type=’video/mp4′> <source src=”my_video.webm” type=’video/webm’> </video> 其中poster就是視頻的縮略圖，那倆source一個指向mp4視頻，一個指向webm視頻，在頁面加載過程中，video.js會判斷瀏覽器支持哪個格式視頻，會自動加載可播放的視頻。 （2）通過API設置視頻： <video id="videoID"></video>

　　var player = videojs('videoID',{
　　　　controls: true, ?//控制條
　　　　preload: 'none', //是否自動加載
　　　　width: '640',
　　　　height: '264',
　　　　poster: 'media/poster.jpg',
　　　　sources: [
　　　　　　{src: 'media/001.mp4',type: 'video/mp4'}
　　　　]
　　},function(){
　　　　var that = this;
　　　　that.on('pause',function(){
　　　　　　old_time = this.currentTime();
　　　　　　console.log('pause:' + old_time);
　　　　})
　　　　that.on('play',function(){
　　　　　　new_time = this.currentTime();
　　　　　　　console.log('playing:' + this.currentTime());
　　　　})
　　　　that.on('seeked',function(){
　　　　　　new_time = this.currentTime();
　　　　　　console.log('seeked:' + this.currentTime());
　　　　　　if (old_time) {
　　　　　　　　console.log(new_time > old_time ? '拖動快進' : '拖動后退');
　　　　　　}
　　　　})
　　　　that.on('ended',function(){
　　　　　　console.log('ended:'+ this.currentTime());
　　　　　　console.log('duration:' + this.duration());
　　　　})
　　})

轉載于:https://www.cnblogs.com/zhang134you/p/7081036.html

總結

以上是生活随笔為你收集整理的videoJS如何用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。