前言
最近在項目中有一個播放監控站點圖像視頻的功能（類似與直播）3d視頻控制器代碼31，然后對此進行了一個記錄與總結！
在此功能中，后臺本來給的是rtmp格式的視頻流，后在網上找了幾種方式，發現rtmp視頻流需要使用flash播放器，然而各大主流瀏覽器已經放棄flash，因此最后又改用hls格式的視頻流，最終完成這個功能！（如果只是想要成功的代碼，請直接看：三、vue加載hls視頻流）
一、視頻流是什么？
三種定義在這里不做過多贅述，有想深入了解的小伙伴可以自己再去了解一下；rtmp視頻流實際上就是以rtmp流媒體協議生成的流媒體；hls視頻流同理（這個視頻流的格式一般由后臺進行控制）
二、vue加載rtmp視頻流1.方法一：video.js
npm install --save vue-video-player npm install --save videojs-flash
?? ??? ??? ? ?? ?
<script>
?? ?import Video from "video.js"
?? ?import "video.js/dist/video-js.min.css"
? export default {
? ? name: "video-play-box",
? ? mounted(){
? ? ? this.player = Video("video", {
? ? ? ? //確定播放器是否具有用戶可以與之交互的控件。沒有控件，啟動視頻播放的唯一方法是使用autoplay屬性或通過Player API。
? ? ? ? controls: true,
? ? ? ? //自動播放屬性,muted:靜音播放
? ? ? ? muted: false,
? ? ? ? autoplay: true,
? ? ? ? //建議瀏覽器是否應在
2.方法二：
因為本人已經嘗試過由于flash原因不可用，所以已經都刪掉了，沒有部分截圖，就文字描述一下3d視頻控制器代碼31，感興趣的小伙伴可以自己搜一下。
?? ? ? ? ?
<script>
export default {
? name: "ckplayerPlugin",
? data () {
? ? return {
? ? }
? },
? mounted: function(){
? ? // 掛載完成后進行
? ? var videoObject = {
? ? ? ? ? ? ? ? container: "#video", //容器的ID或className
? ? ? ? ? ? ? ? variable: "player", //播放函數名稱
? ? ? ? ? ? ? ? loaded: "loadedHandler", //當播放器加載后執行的函數
? ? ? ? ? ? ? ? loop: true, //播放結束是否循環播放
? ? ? ? ? ? ? ? cktrack: "static/ckplayer/material/srt.srt", //字幕文件
? ? ? ? ? ? ? ? poster: "static/ckplayer/material/poster.jpg", //封面圖片
? ? ? ? ? ? ? ? preview: { //預覽圖片
? ? ? ? ? ? ? ? ? ? file: ["static/ckplayer/material/mydream_en1800_1010_01.png", "static/ckplayer/material/mydream_en1800_1010_02.png"],
? ? ? ? ? ? ? ? ? ? scale: 2
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? config: "", //指定配置函數
? ? ? ? ? ? ? ? debug: true, //是否開啟調試模式
? ? ? ? ? ? ? ? drag: "start", //拖動的屬性
? ? ? ? ? ? ? ? seek: 0, //默認跳轉的時間
? ? ? ? ? ? ? ? //廣告部分開始
? ? ? ? ? ? ? ? adfront: "http://×××w.ckplayer.com/yytf/swf/front001.swf,http://×××w.ckplayer.com/yytf/swf/front002.swf", //前置廣告
? ? ? ? ? ? ? ? adfronttime: "15,15",
? ? ? ? ? ? ? ? adfrontlink: "",
? ? ? ? ? ? ? ? adpause: "http://×××w.ckplayer.com/yytf/swf/pause001.swf,http://×××w.ckplayer.com/yytf/swf/pause002.swf",
? ? ? ? ? ? ? ? adpausetime: "5,5",
? ? ? ? ? ? ? ? adpauselink: "",
? ? ? ? ? ? ? ? adinsert: "http://×××w.ckplayer.com/yytf/swf/insert001.swf,http://×××w.ckplayer.com/yytf/swf/insert002.swf",
? ? ? ? ? ? ? ? adinserttime: "10,10",
? ? ? ? ? ? ? ? adinsertlink: "",
? ? ? ? ? ? ? ? inserttime: "10,80",
? ? ? ? ? ? ? ? adend: "http://×××w.ckplayer.com/yytf/swf/end001.swf,http://×××w.ckplayer.com/yytf/swf/end002.swf",
? ? ? ? ? ? ? ? adendtime: "15,15",
? ? ? ? ? ? ? ? adendlink: "",
? ? ? ? ? ? ? ? //廣告部分結束
? ? ? ? ? ? ? ? promptSpot: [ //提示點
? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? words: "提示點文字01",
? ? ? ? ? ? ? ? ? ? ? ? time: 30
? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? words: "提示點文字02",
? ? ? ? ? ? ? ? ? ? ? ? time: 150
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ],
? ? ? ? ? ? ? ? video: [
? ? ? ? ? ? ? ? ? ? ["http://img.ksbbs.com/asset/Mon_1703/05cacb4e02f9d9e.mp4", "video/mp4", "中文標清", 0],
? ? ? ? ? ? ? ? ? ? ["http://img.ksbbs.com/asset/Mon_1703/d0897b4e9ddd9a5.mp4", "video/mp4", "中文高清", 0],
? ? ? ? ? ? ? ? ? ? ["http://img.ksbbs.com/asset/Mon_1703/eb048d7839442d0.mp4", "video/mp4", "英文高清", 10],
? ? ? ? ? ? ? ? ? ? ["http://img.ksbbs.com/asset/Mon_1703/d30e02a5626c066.mp4", "video/mp4", "英文超清", 0]
? ? ? ? ? ? ? ? ]
? ? ? ? ? ? };
? ? ? // 定義一個對象
? ? ? var player = new ckplayer(videoObject);
? }
}
</script>
總結：經檢驗，以上兩種方法加載均需要flash的支持，然而目前大眾瀏覽器均已放棄flash，所以建議使用下方hls視頻流播放；
三、vue加載hls視頻流1.index.html中
添加：
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
2.video-.vue文件
?? ? ?
<script>
export default {
? name: "hls-video",
? components: {
? },
? data() {
? ? return{
? ? ? ? video:null,
? ? ? ? hls:null
? ? }
? },
? props: {
? ? selectStdInfo:{
? ? ? type:Object,
? ? ? required:true
? ? }
? },
? watch:{
? ? // 視頻彈窗時如果彈窗已存在，重新加載視頻流
? ? "selectStdInfo.mourl":function(oldV,newV){
? ? ? if(newV!=oldV){
? ? ? ? this.initVideo()
? ? ? }
? ? }
? },
? mounted() {
? ? this.initVideo()
? },
? destroyed(){
? ? this.reset()
? },
? methods: {
? ?? ? ?//組件銷毀時，調用該方法，停止請求；detachMedia和stopLoad為hls官網方法
? ? ? reset(){
? ? ? ? ? this.hls.detachMedia(this.video)
? ? ? ? ? this.hls.stopLoad() ??
? ? ? },
? ? ? //初始化video ?
? ? ? initVideo () { ? ? ??
? ? ? ? ? this.video = document.getElementById("video")
? ? ? ? ? // 瀏覽器是否支持hls?
? ? ? ? ? if(Hls.isSupported()) {
? ? ? ? ? ? ?//如果hls已存在，先清空
? ? ? ? ? ? ?if(this.hls){
?? ? ? ? ? ? ? ?this.reset()
?? ? ? ? ? ? ?}else{
?? ? ? ? ? ? ? ?this.hls = new Hls()
?? ? ? ? ? ? ?}
?? ? ? ? ? ? ?//this.selectStdInfo.mourl為父組件傳給該子組件的視頻url
?? ? ? ? ? ? ?this.hls.loadSource(this.selectStdInfo.mourl)
?? ? ? ? ? ? ?this.hls.attachMedia(this.video)
?? ? ? ? ? ? ?this.hls.on(Hls.Events.MANIFEST_PARSED,()=>{
?? ? ? ? ? ? ? ?this.video.play()
?? ? ? ? ? ? ?});
?? ? ? ? ?}else if (video.canPlayType("http://kbs-dokdo.gscdn.com/dokdo_300/_definst_/dokdo_300.stream/playlist.m3u8")) {
? ? ? ? ?? ?// 不支持hls ,支持蘋果原生?
? ? ? ? ? ?? ?this.video.src = ""
? ? ? ? ? ??? ?this.video.addEventListener("loadedmetadata",function() {
? ? ? ? ? ? ? ? this.video.play()
? ? ? ? ? ?})
? ? ? ? ?}
? ? ? }
? },
}
</script>
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持云海天教程。