摘要:最近的項目中需要播放視頻,鑒于元素的一些坑及不想自己造輪子,于是就找到了端播放視頻使用量最多的插件,是國外開發者開發的,英語本身就不好的我看英文文檔簡直是折磨,國內又沒有中文文檔,能搜的到的基本是簡單的使用及最基本的的介紹,想要實現一些自定
最近的項目中需要播放視頻,鑒于html5元素1、視頻初始化
video.js有兩種初始化方式,一種是在video的html標簽之中,一種是使用js來進行初始化
1.1、在video中進行初始化效果
2、controlBar組件的說明
playToggle, //播放暫停按鈕
volumeMenuButton,//音量控制
currentTimeDisplay,//當前播放時間
timeDivider, // "/" 分隔符
durationDisplay, //總時間
progressControl, //點播流時,播放進度條,seek控制
liveDisplay, //直播流時,顯示LIVE
remainingTimeDisplay, //當前播放時間
playbackRateMenuButton, //播放速率,當前只有html5模式下才支持設置播放速率
fullscreenToggle //全屏控制
currentTimeDisplay,timeDivider,durationDisplay是相對于 remainingTimeDisplay的另一套組件,后者只顯示當前播放時間,前者還顯示總時間。若要顯示成前者這種模式,即 "當前時間/總時間",可以在初始化播放器選項中配置:
var myPlayer = neplayer("my-video", {controlBar:{ "currentTimeDisplay":true, "timeDivider":true, "durationDisplay":true, "remainingTimeDisplay":false }}, function() { console.log("播放器初始化完成"); });3、video.js樣式修改
.video-js{ /* 給.video-js設置字體大小以統一各瀏覽器樣式表現,因為video.js采用的是em單位 */ font-size: 14px; } .video-js button{ outline: none; } .video-js.vjs-fluid, .video-js.vjs-16-9, .video-js.vjs-4-3{ /* 視頻占滿容器高度 */ height: 100%; background-color: #161616; } .vjs-poster{ background-color: #161616; } .video-js .vjs-big-play-button{ /* 中間大的播放按鈕 */ font-size: 2.5em; line-height: 2.3em; height: 2.5em; width: 2.5em; -webkit-border-radius: 2.5em; -moz-border-radius: 2.5em; border-radius: 2.5em; background-color: rgba(115,133,159,.5); border-width: 0.12em; margin-top: -1.25em; margin-left: -1.75em; } .video-js.vjs-paused .vjs-big-play-button{ /* 視頻暫停時顯示播放按鈕 */ display: block; } .video-js.vjs-error .vjs-big-play-button{ /* 視頻加載出錯時隱藏播放按鈕 */ display: none; } .vjs-loading-spinner { /* 加載圓圈 */ font-size: 2.5em; width: 2em; height: 2em; border-radius: 1em; margin-top: -1em; margin-left: -1.5em; } .video-js .vjs-control-bar{ /* 控制條默認顯示 */ display: flex; } .video-js .vjs-time-control{display:block;} .video-js .vjs-remaining-time{display: none;} .vjs-button > .vjs-icon-placeholder:before{ /* 控制條所有圖標,圖標字體大小最好使用px單位,如果使用em,各瀏覽器表現可能會不大一樣 */ font-size: 22px; line-height: 1.9; } .video-js .vjs-playback-rate .vjs-playback-rate-value{ line-height: 2.4; font-size: 18px; } /* 進度條背景色 */ .video-js .vjs-play-progress{ color: #ffb845; background-color: #ffb845; } .video-js .vjs-progress-control .vjs-mouse-display{ background-color: #ffb845; } .vjs-mouse-display .vjs-time-tooltip{ padding-bottom: 6px; background-color: #ffb845; } .video-js .vjs-play-progress .vjs-time-tooltip{ display: none!important; }4、動態切換視頻 5、設置語言 5.1傳統形式開發
對于使用標簽形式的方式引入video.js,只需要在頁面中引入你需要的語言包即可
5.2、vue開發
import Video from "video.js" /* 不能直接引入js,否則會報錯:videojs is not defined import "video.js/dist/lang/zh-CN.js" */ import video_zhCN from "video.js/dist/lang/zh-CN.json" import video_en from "video.js/dist/lang/en.json" import "video.js/dist/video-js.css" Video.addLanguage("zh-CN", video_zhCN); Video.addLanguage("en", video_en);6、未解決的問題
控制條的高級自定義,如圖中的進度條及時間在上面,播放按鈕、上一個視頻、下一個視頻,設置及音量在下面這種控件該如何實現?
如有知道實現這種高級自定義控制條方式的大神請在評論區留下您的代碼
7、參考文章視頻云web播放器樣式和組件自定義
Video.js 踩坑簡單入門
免費視頻播放器videojs中文教程
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/103671.html
摘要:電影天堂客戶端重新開始具體更新以為準。重新開始兩年前發布了第一個版本。最為一名偏體驗偏設計的前端開發者,對界面和用戶體驗都有極高的重視。 電影天堂React Native 客戶端 重新開始! 具體更新以https://github.com/XboxYan/DYTT為準。 重新開始 兩年前發布了第一個版本。 現在, 使用最新的react-native 0.57和全新的設計完成了V2.0 ...
摘要:一視頻控制視頻暫停對比自己手頭的網站源碼和實際生成的頁面后,發現源碼中包含了視頻地址的標簽,在實際頁面中,會再生成一個子節點,視頻播放控制,需要對這個子節點設置才能生效。 一、 視頻控制 視頻暫停 對比自己手頭的網站源碼和實際生成的頁面后,發現源碼中包含了視頻地址的 標簽,在實際頁面中,會再生成一個子節點,視頻播放控制,需要對這個子節點設置才能生效。 // 視頻暫停代碼 ...
閱讀 848·2021-11-25 09:43
閱讀 3681·2021-11-19 09:40
閱讀 882·2021-09-29 09:34
閱讀 1784·2021-09-26 10:21
閱讀 870·2021-09-22 15:24
閱讀 4188·2021-09-22 15:08
閱讀 3265·2021-09-07 09:58
閱讀 2657·2019-08-30 15:55