一，Web視頻播放器插件

一個(gè)好的播放器需要滿足以下需求： 1. 支持所有主流瀏覽器（兼容性保障） 2. 用戶能與播放器交互，播放器必須提供必要的API，比如播放，暫停，停止，拖動(dòng)，倍速播放，片源切換 3. 可定制外觀，方便后期擴(kuò)展，UI定制化保障不同的用戶自定義 4. 支持flv、mp3、mp4格式，支持播放列表 5. 詳盡的幫助文檔說(shuō)明，方便開(kāi)發(fā)者使用 二、播放器插件舉例 1、videoJS： videojs是一個(gè)兼容html5的視頻播放工具，早期版本兼容所有瀏覽器，方法是：提供三個(gè)后綴名的視頻，并在不支持html5的瀏覽器下生成一個(gè)flash的版本。 最新的3.1.0版本優(yōu)化了之前的做法，只需要提供兩個(gè)格式的視頻，頁(yè)面制作起來(lái)更加方便，只有兩步走： 1、引用腳本，videojs很為你著想，直接cdn了，你都不需要下載這些代碼放入自己的網(wǎng)站 <link href=”http://vjs.zencdn.net/c/video-js.css” rel=”stylesheet”> <script src=”http://vjs.zencdn.net/c/video.js”></script> 2、頁(yè)面中使用方式： （1）直接在HTML中設(shè)置屬性 <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一個(gè)指向mp4視頻，一個(gè)指向webm視頻，在頁(yè)面加載過(guò)程中，video.js會(huì)判斷瀏覽器支持哪個(gè)格式視頻，會(huì)自動(dòng)加載可播放的視頻。 （2）通過(guò)API設(shè)置視頻： <video id="videoID"></video>

　　var player = videojs('videoID',{
　　　　controls: true, ?//控制條
　　　　preload: 'none', //是否自動(dòng)加載
　　　　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 ? '拖動(dòng)快進(jìn)' : '拖動(dòng)后退');
　　　　　　}
　　　　})
　　　　that.on('ended',function(){
　　　　　　console.log('ended:'+ this.currentTime());
　　　　　　console.log('duration:' + this.duration());
　　　　})
　　})

轉(zhuǎn)載于:https://www.cnblogs.com/zhang134you/p/7081036.html

總結(jié)

以上是生活随笔為你收集整理的videoJS如何用的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。