之前接觸最多的都是EasyNVR，主要針對的都是前端的一些問題。也有接觸到一些easydss流媒體伺服器。
前端方面的，EasyDSS流媒體伺服器與EasyNVR有着根本的不同。EasyNVR使用的是傳統的js來進行開發。而EasyDSS使用的是webpack+vue來進行開發的。 能了解到vue+webpack的應該都需要介紹他的好處了吧。
我也是在這裡才接觸的vue。我在後續的部落格中也會記錄下自己的一些學習vue的體會、心得。
之前沒有接觸過vuejs。由于開發需求，需要在easydss流媒體伺服器web頁面來進行，是以對vue也開始有一些接觸。
回歸正題，元件的傳值問題。
vue中對元件的定義：元件 (Component) 是 Vue.js 最強大的功能之一。元件可以擴充 HTML 元素，封裝可重用的代碼。在較高層面上，元件是自定義元素，Vue.js 的編譯器為它添加特殊功能。在有些情況下，元件也可以表現為用 is 特性進行了擴充的原生 HTML 元素。
以EasyDSS前端為基礎來實作傳值：
父元件傳給子元件
在子元件中使用 Prop 傳遞資料
props：監聽父元件傳過來的值，不監聽，不會在子元件中使用（以對象形式來記錄）；
上代碼更直覺：
父元件代碼
<div class="video-window window3" id="3" @click="getAlt($event,3)" style="cursor:pointer">
<div class="message">
<i class="fa fa-history" aria-hidden="true"></i>
啟動播放器
</div>
<VideoJS :videoUrl="videoUrl3" live></VideoJS>
//向子元件中傳遞videoUrl這個值，videoUrl的内容就是”videoUrl3“
</div> 子元件代碼
props: {
videoUrl: {
default: ""
},
},
computed: {
videoType() {
let _type = "application/x-mpegURL";
if (this.rtmp) {
_type = "rtmp/mp4";
}
return _type;
},
rtmp() {
return (this.src || "").indexOf("rtmp") == 0;
},
}, 在子元件中進行監聽來，使用父元件傳遞過來的videoUrl這個值
src() {
if (!this.videoUrl) {
return "";
}
if (this.videoUrl.indexOf("/") === 0) {
return location.protocol + "//" + location.host + this.videoUrl;
}
return this.videoUrl;
}, 因為在父元件中已經指派，所有可以直接用this.XX
videoHtml() {
return `
<video class="video-js vjs-default-skin vjs-big-play-centered" style="width: 100%; height: 100%;" controls preload="none" poster="${this.snapUrl}">
<source src="${this.src}" type="${this.videoType}"></source> / /使用處理好的資料
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a web browser that
<a href="http://videojs.com/html5-video-support/" target="_blank">
supports HTML5 video
</a>
</p>
</video>
`;
}
},
//在src 中對父元件中傳遞過來的videoUrl進行處理，來得到自己想要的資料；
以執行個體來分析：
easydss前端是将videojs播放器寫成一個元件，這裡的四分屏就是以“v-for”調用元件。
該外部的元件現對于videojs元件就是一個父元件，videojs則祥地來說就是一個子元件。
實作的效果 就是将頁面中的父元件中的 值傳到videojs子元件中來完成播放的功能。
完成效果：
備注：我們的官網實作的是自動播放目前直播清單中的所有實時流。該篇部落格說明的是以easydss為基礎來進行的選擇性播放。後續會講解如何選擇對應播放器來播放對應的實時視訊流以及子元件是如何向父元件來進行傳值的。
關于EasyDSS流媒體伺服器
EasyDSS商用流媒體伺服器解決方案是一套集流媒體點播、轉碼與管理、直播、錄像、檢索、時移回看于一體的一套完整的商用流媒體伺服器解決方案，EasyDSS高性能RTMP流媒體伺服器支援RTMP推流，同步輸出HTTP、RTMP、HLS、HTTP-FLV，支援推流分發/拉流分發，支援秒開、GOP緩沖、錄像、檢索、回放、錄像下載下傳、網頁管理等多種功能，是目前市面上最合理的一款商用流媒體伺服器！
詳細說明：http://www.easydss.com/
點選連結加入群【EasyDSS流媒體伺服器】：560148162