摘要:背景根據用戶的信息來顯示不同的視頻源默認情況下將會消除任何音頻。換句話說,它將按比例縮放以適應其容器。此視頻暫無法播放,請稍后再試允許覆蓋無法播放媒體源時顯示的默認信息。
背景:根據用戶的信息來顯示不同的視頻源
export default { data () { return { playerOptions: { // videojs options muted: true, language: "en", playbackRates: [0.7, 1.0, 1.5, 2.0], sources: [{ type: "video/mp4", src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm" // src: "http://www.17sucai.com/preview/501914/2017-08-04/%E9%A1%B5%E9%9D%A2/media/mov_bbb.mp4" }], muted: false, // 默認情況下將會消除任何音頻。 loop: false, language: "zh-CN", fluid: true, // 當true時,Video.js player將擁有流體大小。換句話說,它將按比例縮放以適應其容器。 poster: "/static/images/author.jpg", width: 700, notSupportedMessage: "此視頻暫無法播放,請稍后再試", //允許覆蓋Video.js無法播放媒體源時顯示的默認信息。 }, } }, methods: { showVideo (bol) { let myPlayer = this.$refs.videoPlayer.player; if( bol ) { myPlayer.src(this.getUserType); //根據userType的不同展示不同的視頻地址 return false }; } }, computed: { getUserType () { let userType = parseInt(this.userInfo.userType); let videoSrc = "" if(userType === 1){ videoSrc = "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm" }else if (userType === 2){ videoSrc = "http://www.17sucai.com/preview/501914/2017-08-04/%E9%A1%B5%E9%9D%A2/media/mov_bbb.mp4" } return videoSrc; } } }
初始 playerOptions.sources.src必須有值,否則后續視頻的進度條會有問題
//感覺我使用的是最笨的方法,如果有更好的方法,望留言指教>_<
需要更改播放按鈕,默認的是有一個比較丑的播放按鈕,但是設計人員給出的播放按鈕比較漂亮,一開始的思路是怎么把控制播放的事件綁定到自己寫的按鈕上面,最終沒有實現= =。。。 然后開始想改變樣式來控制,直接暴力修改它原本的樣式,并通過比較播放暫停播放狀態容器上類名的不同來顯示隱藏“漂亮”的播放按鈕 播放時和暫停時容器的類名差別是有沒有 “vjs-paused” 最終的解決方法: .video-js{ .fs(24);// 樣式文件里元素的單位是em,因為控制條太小了,默認的font-size是10px,所以這里做了更改。 fs(24)最終通過less的處理會轉換為rem單位 } .video-js .vjs-big-play-button{ position: absolute; display: block; left: 0px; top: 0px; width: 100%; height: 100%; background: rgba(0, 0, 0, .7); border: none; } .video-js .vjs-big-play-button .vjs-icon-placeholder:before{ position: absolute; content: ""; .w(120); .h(120); left: 50%; top: 50%; .ml(-60); .mt(-60); background: url("../../assets/images/icon_play@2x.png") center center no-repeat; background-size: 100% 100%; border: none; } //下面代碼控制播放按鈕是否顯示 .vjs-controls-disabled .vjs-big-play-button, .vjs-has-started .vjs-big-play-button, .vjs-using-native-controls .vjs-big-play-button, .vjs-error .vjs-big-play-button { display: none; } .vjs-paused .vjs-big-play-button { display: block; } 今天腦袋突然開竅,發現一個不用更改原先的css就可以實現控制播放的方法,其實這樣子用就可以,
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/94729.html
摘要:默認情況下將會消除任何音頻。瀏覽器選擇最佳行為立即開始加載視頻如果瀏覽器支持將播放器置于流暢模式,并在計算播放器的動態大小時使用該值。換句話說,它將按比例縮放以適應其容器。 下載vue-video-player npm install vue-video-player --save 在main.js文件引入 showImg(https://segmentfault.com/img/b...
摘要:默認情況下將會消除任何音頻。瀏覽器選擇最佳行為立即開始加載視頻如果瀏覽器支持將播放器置于流暢模式,并在計算播放器的動態大小時使用該值。換句話說,它將按比例縮放以適應其容器。 下載vue-video-player npm install vue-video-player --save 在main.js文件引入 showImg(https://segmentfault.com/img/b...
摘要:前言本文的前身是源自上的項目但由于該項目上次更新時間為年月日,很多內容早已過期或是很多近期優秀組件未被收錄,所以小肆今天重新更新了內容并新建項目。提交的項目格式如下項目名稱子標題相關介紹如果收錄的項目有錯誤,可以通過反饋給小肆。 前言 本文的前身是源自github上的項目awesome-github-vue,但由于該項目上次更新時間為2017年6月12日,很多內容早已過期或是很多近期優...
閱讀 3495·2021-11-24 11:17
閱讀 2281·2021-11-15 11:38
閱讀 3367·2021-10-14 09:42
閱讀 2930·2019-08-30 15:54
閱讀 2024·2019-08-28 18:09
閱讀 539·2019-08-26 11:48
閱讀 1633·2019-08-26 10:48
閱讀 2147·2019-08-26 10:45