videojs使用技巧

2022-08-09 06:03:15 字數 2077 閱讀 8416

摘自

videojs初始化有兩種方式。

一種是在標籤裡面加上class="video-js"

data-setup='{}'

屬性。注意,兩者缺一不可。

另外一種方法是通過js初始化,格式:

var player = videojs('my-player');
這樣有個要求,就是不能配置data-setup,並且需要傳入的id。

當然,如果不想乙個個初始化,可以這樣來:

(function

());}}

})();

不過這是可以通過引數修改的,在標籤中加入vjs-big-play-centered類,就可以了。

像這樣:

class="video-js vjs-big-play-centered"
videojs 4.9開始支援標籤一樣,也必須要配置data-setup引數。

很多人給出的方法是,在標籤中加入playsinline引數,如下

<

video

playsinline

>

video

>

注意,在ios10之前用的是webkit-playsinline

有很多用js的解決辦法,感覺都挺麻煩的。

其實用css就可以搞定了:

.vjs-paused .vjs-big-play-button,

.vjs-paused.vjs-has-started .vjs-big-play-button

是不是很輕便很簡單 :)

那麼怎麼改呢?還是用css來解決。

.video-js .vjs-big-play-button

/**/

.vjs-big-play-button .vjs-icon-placeholder

/*載入圓圈

*/.vjs-loading-spinner

因為原來居中的時候寬度和高度改變了,所以margin的值也要相應改變

.video-js.vjs-playing .vjs-tech
pointer-events是css的乙個屬性,用來控制滑鼠的動作,具體可參考《css裡的pointer-events屬性》。

例如這樣的標籤:

<

video

id="example_video"

>

<

source

id="videomp4"

src="1.mp4"

/>

video

>

<

button

id="reload"

>過載

button

>

那通過js方式就可以這樣實現:

var video = document.getelementbyid('example_video');

var source = document.getelementbyid('videomp4');

$("#reload").click(function

() );

或者:

var video = document.getelementbyid('example_video');

$("#reload").click(function

() );

videojs做直播 彈幕

開始調研 下面簡單說說區別,如果不做移動端,http flv是最優選擇,也是當前主流直播 所用的格式。hls在videojs中也有js的實現,即使是不支援hls,也能讓它支援,估算相容ie9 或許更高。由於它的延遲比rtmp和flv高,所以用作最後的相容選項。rtmp跟flv差不多,但是依賴flas...

vue使用videojs控制後台m3u8資料請求

關於video.js的使用方法就不再說了,有興趣的請遷躍 videojs中並沒有stop之類控制後台資料請求的引數,只有暫停 video.pause 方法 但是對於後台的請求是不會暫停的,如果我頁面有多個vedio例項需要存在,這樣就太影響頁面效率了 我使用的是vue 元件化的vediojs控制項 ...

解決Videojs安卓全屏時不能橫屏

參考 一 引用videojs landscape fullscreen.min.js 使用例項 var player videojs some player id 設定全屏時橫屏 player.landscapefullscreen 二 注意此方法會影響到蘋果機型,所以呼叫前需要判斷手機機型 判斷手...