整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
帶著疑問進來了就別走了！看動漫都能學前端，那我前面死記硬背記下來的前端理論知識跟代碼那不是白瞎了么？
沒錯！今天小編帶來一本書籍，從動漫和人物場景對話中就能學會前端。
《Head first Javascript 中文版》用講故事的方法講解知識，讓人耳目一新。小編讀了幾章下來發現學習的過程中絲毫沒有感到枯燥，是一本不可多得的好書！小編找來了本書的PDF電子版分享給大家，還在為學習前端煩惱的小伙伴們有福啦！
下面簡單介紹一些目錄，文末附領取方式。
注意！《Head first Javascript 中文版》分享格式為PDF電子版，小伙伴們手機也可以學習閱讀哦！
近想重溫電腦里的視頻，想要用電視來看，找了很多方法，比如電腦搭建samba服務器，搭建jellyfin服務器，把視頻拷貝到U盤里播放等等，設置操作復雜且對電腦的配置要求比較高，前前后后折騰了很久，雖也實現了再電視上播放電腦里的視頻，但是效果體驗大打折扣。
最后找到了幾年前的暴風影音軟件，發現這對于不想折騰的朋友，是非常簡單又穩定的一個局域網電視播放電腦里視頻的解決方案。省去了各種復雜的設置和權限問題。
實現方法如下：
電視端通過U盤或者當貝助手下載安裝暴風影音TV版
下載鏈接 http://az3.ddooo.com/bfyybdb_58903.apk?key=e0d518b1ecdb4ac64ff0cdbfa73b1bc0&uskey=ed16cbd15fbc9a074a6c2e828e55ed18 或者自行搜索下載
電腦端安裝飛屏軟件
下載鏈接 https://pc.qq.com/detail/4/detail_56604.html 或者自行搜索下載
官網下載地址：http://feiping.baofeng.com/（已無法訪問）
待電腦端軟件和電視端軟件都安裝完畢之后，打開電腦端暴風飛屏軟件，添加要共享的視頻，可以共享整個文件夾或者單個文件，可以很好的保護隱私。加號添加文件或者文件夾，或者直接拖動視頻文件到窗口里即可，操作非常簡單。
暴風飛屏軟件截圖
電腦端打開暴風影音TV版，找到飛屏功能，即可掃描到局域網的電腦，進入之后即可訪問剛才電腦端添加的視頻，實測可以輕松播放4k影片。
很好用的一款軟件，本人之前也在暴風影音工作過一段時間，可惜暴風影音因為經營不善，現已停止了軟件的支持，但是不妨礙使用。無廣告，操作簡單，界面也很簡潔，在現在廣告滿天飛的時代里，算是一種曲線解決問題吧。
視頻采集和管理是多模態大數據應用場景必不可少的環節，在基于Vue2前端框架實現的Web界面如何進行視頻的展示和播放是開發人員會遇到的一個主要技術問題。本文提供基于Vue2+video.js實現視頻的預覽的方案。
采集的視頻數據在前端視頻管理模塊列表中展示，然后用彈窗查看視頻詳情并預覽播放。最開始使用 vue-mini-player 組件，可輕松實現視頻在編輯界面的彈窗中播放，但是遇到兩個問題：1）彈窗中播放著視頻，關閉窗口后，視頻流不會停止。2）關閉窗口，重新打開新的視頻編輯窗口后，依舊是繼續播放之前的視頻。其原因應該是關閉舊的窗口后，視頻播放的控件沒有銷毀，導致新打開的控件其實還是舊控件的實例。查了很多關于vue-mini-player的文檔和使用樣例，沒有找到如何銷毀vue-mini-player控件。
視頻列表
單條視頻數據編輯界面
video.js 是一個通用的可嵌入網頁的視頻播放器JS庫，在Vue2中引用video.js可以創建播放組件對象，關閉視頻時能進行操作。基于Vue2使用video.js方法如下。
npm install video.js@6.13.0import videoJs from 'video.js'
import 'video.js/dist/video-js.css'
Vue.prototype.videoJs=videoJs //注冊創建<video>組件，可放在彈窗中任何需要的地方。重點是給出id值，設置屬性時需要用到。
<template>
<el-dialog :title="title" :visible.sync="open" width="900px" append-to-body>
<video id="casvideoplayer" ref="videoPlayerRef" class="video-js">
<source :src="playUrl" type="video/mp4">
</video>
...
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">確 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
</template>export default {
data() {
return {
// 使用video.js播放視頻配置
videoJsPlayer: null,
playUrl:"", //視頻文件鏈接
videoPlayerOption: {
controls: true, //確定播放器是否具有用戶可以與之交互的控件。沒有控件，啟動視頻播放的唯一方法是使用autoplay屬性或通過Player API。
// url: "", //要嵌入的視頻資源url（不起作用？）
poster: '', //封面
autoplay: false, //自動播放屬性, true/false/"muted"(靜音播放)
muted: false, //靜音播放
preload: 'none', //建議瀏覽器是否應在<video>加載元素后立即開始下載視頻數據。
fluid: false, //是否自適應布局,播放器將會有流體體積。換句話說，它將縮放以適應容器。
width: "850px", //視頻播放器的顯示寬度（以像素為單位）（fluid=false時起作用）
height: "600px", //視頻播放器的顯示高度（以像素為單位）（fluid=false時起作用）
},
};methods: {
// 視頻列表的“修改”按鈕，點擊后顯示修改彈窗
handleUpdate(row) {
// 從后臺獲取視頻信息
getVedio(row.id).then(response=> {
this.form=response.data; //修改彈窗其他字段信息賦值
this.title="修改視頻管理";
this.open=true; // 顯示修改彈窗
// video.js組件播放視頻
this.videoPlayerOption.poster=response.data.avator;
this.playUrl=response.data.contentsOrg;
this.showVideoWindow(); //設置視頻播放控件
});
},
//（重點是這里）
// 使用video.js組件播放視頻
showVideoWindow(){
// 如果視頻播放控件已經存在，切換視頻url，重新播放；如果控件不存在，創建
if(this.videoJsPlayer){
this.videoJsPlayer.src([
{
src: this.playUrl,
type: "video/mp4"
}
]);
// 如何圖片不為空，設置視頻封面
if(this.videoPlayerOption.poster !=null && this.videoPlayerOption.poster !=""){
this.videoJsPlayer.poster(this.videoPlayerOption.poster);
}
this.videoJsPlayer.load(this.playUrl);
// this.videoJsPlayer.play(); //自動播放（打開后，切換視頻后需自動播放）
}else{
// 最開始創建一次視頻播放組件
this.$nextTick(()=> {
this.videoJsPlayer=this.videoJs(
"casvideoplayer", //播放器控件id
this.videoPlayerOption //播放器設置項（這里設置的poster屬性不生效，需要在后面單獨設置）
);
this.videoJsPlayer.poster(this.videoPlayerOption.poster); //貌似不生效？
})
}
},
// 編輯彈窗頁面的“取消”按鈕
cancel() {
// 重置視頻控件數據（video.js組件）
if(this.videoJsPlayer){
this.videoJsPlayer.reset();
}
this.reset();
},
｝以上代碼實現了在Vue2彈窗中播放視頻組件的功能，注意關閉彈窗時要使用“取消”按鈕。如果通過點擊彈窗右上角X關閉彈窗，視頻還可以在后臺繼續播放，但是打開一個新的視頻修改彈窗后，播放的視頻會終止，并切換到新視頻播放界面。即使這樣，目前的功能已經不影響用戶正常使用。
video.js還有一個強大功能，看到喜歡的畫面點擊右鍵可以保存視頻幀，另外支持畫中畫、設備投放等功能。
video.js右鍵功能
后續優化改進工作包括：1）把video.js視頻播放功能做成Vue組件，方便在不同的Vue代碼文件中調用。2）捕獲窗口關閉的事件（如點擊X關閉，或者鼠標失焦點后關閉），關閉視頻流。
video.js
Vue
【參考材料】
video.js官方網站：https://videojs.com/
其他編碼材料：
https://blog.csdn.net/qq_60533482/article/details/128015308
https://blog.csdn.net/Uookic/article/details/116131535
https://www.cnblogs.com/DL-CODER/p/16833222.html
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
