前言

視頻監(jiān)控是智慧城市、智慧園區(qū)等WebGIS類系統(tǒng)中最為常見的硬件對接設(shè)備，最常用的監(jiān)控視頻流格式為m3u8格式，但是m3u8格式通常都是h.265編碼格式的，我搜遍了幾乎所有前端視頻播放插件，幾乎普通的播放器插件都不支持h.265格式的視頻編碼。本文就帶領(lǐng)大家了解H265視頻編碼，并實現(xiàn)前端播放H265編碼的視頻。

1. 什么是H.265編碼？

目前很多攝像機采用了H.265的編碼標(biāo)準(zhǔn)，H.264編碼的攝像機逐漸減少，為什么H.265會流行？H.264和H.265有何不同？

H.265是ITU-TVCEG繼H.264之后所制定的新的視頻編碼標(biāo)準(zhǔn)。H.265標(biāo)準(zhǔn)圍繞著現(xiàn)有的視頻編碼標(biāo)準(zhǔn)H.264，保留原來的某些技術(shù)，同時對一些相關(guān)的技術(shù)加以改進。新技術(shù)使用先進的技術(shù)用以改善碼流、編碼質(zhì)量、延時和算法復(fù)雜度之間的關(guān)系，達到最優(yōu)化設(shè)置。具體的研究內(nèi)容包括：提高壓縮效率、提高魯棒性和錯誤恢復(fù)能力、減少實時的時延、減少信道獲取時間和隨機接入時延、降低復(fù)雜度等。H264由于算法優(yōu)化，可以低于1Mbps的速度實現(xiàn)標(biāo)清數(shù)字圖像傳送；H265則可以實現(xiàn)利用1~2Mbps的傳輸速度傳送720P（分辨率1280*720）普通高清音視頻傳送。

H.265旨在在有限帶寬下傳輸更高質(zhì)量的網(wǎng)絡(luò)視頻，僅需原先的一半帶寬即可播放相同質(zhì)量的視頻。這也意味著，我們的智能手機、平板機等移動設(shè)備將能夠直接在線播放1080p的全高清視頻。H.265標(biāo)準(zhǔn)也同時支持4K(4096×2160)和8K(8192×4320)超高清視頻?？梢哉f，H.265標(biāo)準(zhǔn)讓網(wǎng)絡(luò)視頻跟上了顯示屏“高分辨率化”的腳步。　

H.265雖然有點有很多，但是也有最大劣勢。因為大佬級別公司神仙打架凡人遭殃，h265編碼的視頻不能直接在電腦端瀏覽器播放（部分電腦端的播放器軟件支持播放），手機端（主要是安卓和蘋果）是可以在瀏覽器直接播放的。所以，如果要使用h265編碼的視頻，你的瀏覽器端客戶只能限制在手機端，電腦端瀏覽器用戶考慮其他方案。

2. 解決Web端播放H265的方法

1.?第一種就是使用ffmpeg（FFmpeg是一套可以用來記錄、轉(zhuǎn)換數(shù)字音頻、視頻，并能將其轉(zhuǎn)化為流的開源計算機程序。采用LGPL或GPL許可證。它提供了錄制、轉(zhuǎn)換以及流化音視頻的完整解決方案）進行轉(zhuǎn)碼，這種方案可能比較穩(wěn)定，但是成本較高，而且實現(xiàn)比較復(fù)雜。

2. 使用前端視頻播放插件，我在開發(fā)過程中嘗試了很多很多前端的視頻插件，都無法播放H265編碼的視頻。終于發(fā)現(xiàn)了這個開源免費的前端播放插件EasyPlayer.js。它通過和webassembly結(jié)合，實現(xiàn)了web端支持H265視頻的播放，使用起來也很簡單，GitHub開源地址：

GitHub - tsingsee/EasyPlayer.js: EasyPlayer.js H5播放器，是一款免費的能夠同時支持HTTP、RTMP、HTTP-FLV、HLS（m3u8）直播與點播等多種協(xié)議，支持H.264、H.265、AAC等多種音視頻編碼格式，支持mse、asm、wasm等多種解碼方式，支持Windows、Linux、Android、iOS全平臺終端的H5播放器。EasyPlayer.js H5 Player support HTTP/RTMP/HTTP-FLV/HLS(m3u8) live streaming & vod streaming,support H.264/H.265/AAC video & audio codec,support mse/asm/wasm decode mode,support Windows/Linux/Android/iOS platform,EasyPlayer.js uses leading-edge technology.EasyPlayer.js H5播放器，是一款免費的能夠同時支持HTTP、RTMP、HTTP-FLV、HLS（m3u8）直播與點播等多種協(xié)議，支持H.264、H.265、AAC等多種音視頻編碼格式，支持mse、asm、wasm等多種解碼方式，支持Windows、Linux、Android、iOS全平臺終端的H5播放器。EasyPlayer.js H5 Player support HTTP/RTMP/HTTP-FLV/HLS(m3u8) live streaming & vod streaming,support H.264/H.265/AAC video & audio codec,support mse/asm/wasm decode mode,support Windows/Linux/Android/iOS platform,EasyPlayer.js uses leading-edge technology. - GitHub - tsingsee/EasyPlayer.js: EasyPlayer.js H5播放器，是一款免費的能夠同時支持HTTP、RTMP、HTTP-FLV、HLS（m3u8）直播與點播等多種協(xié)議，支持H.264、H.265、AAC等多種音視頻編碼格式，支持mse、asm、wasm等多種解碼方式，支持Windows、Linux、Android、iOS全平臺終端的H5播放器。EasyPlayer.js H5 Player support HTTP/RTMP/HTTP-FLV/HLS(m3u8) live streaming & vod streaming,support H.264/H.265/AAC video & audio codec,support mse/asm/wasm decode mode,support Windows/Linux/Android/iOS platform,EasyPlayer.js uses leading-edge technology.https://github.com/tsingsee/EasyPlayer.js

EasyPlayer.js簡介：EasyPlayer.js H5播放器，是一款免費的能夠同時支持HTTP、RTMP、HTTP-FLV、HLS（m3u8）直播與點播等多種協(xié)議，支持H.264、H.265、AAC等多種音視頻編碼格式，支持mse、asm、wasm等多種解碼方式，支持Windows、Linux、Android、iOS全平臺終端的H5播放器。?

3. 使用EsayPlayer.js實現(xiàn)前端播放H.265編碼的視頻流

1. Vue2項目安裝EasyPlayer視頻播放插件

  npm install @easydarwin/easyplayer --save

?2. 解壓后根據(jù)說明文檔將文件移動到指定位置

（1）node_modules/@easydarwin/easyplayer/dist/component/EasyPlayer.swf 移動到 靜態(tài)文件 根目錄

（2）node_modules/@easydarwin/easyplayer/dist/component/crossdomain.xml 移動到 靜態(tài)文件 根目錄

（3）node_modules/@easydarwin/easyplayer/dist/component/EasyPlayer-lib.min.js 移動到 靜態(tài)文件 根目錄

（4）特別注意：播放H.265視頻需要將：node_modules/@easydarwin/easyplayer/dist/component/EasyPlayer.wasm 到 靜態(tài)文件 根目錄

3. 在項目中引入和使用H5視頻播放插件

（1）在index.html文件中引入EasyPlayer-lib.min.js

<script src="./EasyPlayer-lib.min.js"></script>

（2）在組件中使用EasyPlayer播放插件

<template>
    <div class="monitor-container">
        <div class="monitor-list-container">
            <div class="monitor-list-title">
                費縣視頻監(jiān)控
            </div>
            <div class="monitor-list-scroll-container">
                <div class="monitor-class-name" @click="monitorShow = !monitorShow">
                    <i class="el-icon el-icon-s-grid"></i>
                    費縣森林防火視頻監(jiān)控({{ monitorList.length }})
                    <i class="el-icon  el-icon-arrow-down" style="float:right;margin-top:16px;"></i>
                </div>
                <div v-show="monitorShow">
                    <div class="monitor-item" v-for="(item,index) in monitorList" :key="index" >
                        <i class="el-icon el-icon-video-camera"></i>
                        {{ item.cameraname }}
                    </div>
                </div>

                <div class="monitor-class-name" @click="monitor2Show = !monitor2Show">
                    <i class="el-icon el-icon-s-grid"></i>
                    市應(yīng)急指揮視頻監(jiān)控({{ monitorList2.length }})
                    <i class="el-icon  el-icon-arrow-down" style="float:right;margin-top:16px;"></i>
                </div>
                <div  v-show="monitor2Show">
                    <div class="monitor-item" v-for="(item,index) in monitorList2" :key="index" @click="playVideo(item,index)">
                        <i class="el-icon el-icon-video-camera"></i>
                        {{ item.jkdmckjg }}
                    </div>
                </div>
                

            </div>
        </div>
        <div class="video-container">
            <div class="layout-container">

            </div>
                <EasyPlayer
                v-for="(item,index) in playArrays" :key="index"
                style="width:450px;height:250px;float:left;margin-right:15px;margin-bottom:15px;"
                :videoUrl="item"
                :aspect="aspect"
                live
                @message="$message"
                :fluent="fluent"
                :autoplay="true"
                stretch
                ></EasyPlayer>
        </div>
    </div>
</template>

<script>
import EasyPlayer from '@easydarwin/easyplayer'
import axios  from 'axios';
import { getMethodCommon } from '../../../api/common';

import 'video.js/dist/video-js.css'
import videojs from "video.js";
import "videojs-contrib-hls";

export default{
    components:{
        EasyPlayer
    },
    data(){
        return {
            videoUrl:"",
            aspect:"16:9",
            fluent:true,
            playArrays:[],
            monitorShow:false,
            monitor2Show:true,
            monitorList:[],
            monitorList2:[],
            player:null,
        }
    },
    created(){
        this.getHKmonitorlist();
        this.getYJmonitorlist();
    }, 
    mounted() {
        let _this = this;
        setTimeout(()=>{
            
        },5000)
    },
 
    methods:{
        getVideo() {
            videojs("myvideo",{
                bigPlayButton: false,
                textTrackDisplay: false,
                posterImage: true,
                errorDisplay: false,controlBar: true
            },
            function() {
                this.play();
            });
        },
        playVideo(item,index){
            if(this.playArrays.find((it,idx)=>{
                return it == "http://***.***.***.***/live/"+item.jkdgbidzlkjg+".m3u8"
            })){
                this.$message({
                    type:"error",
                    message:"已經(jīng)添加至播放列表"
                })
                return;
            }
            if(this.playArrays.length>=4){
                this.playArrays.shift();
            }
            this.playArrays.push("http://***.***.***.***:7012/live/"+item.jkdgbidzlkjg+".m3u8")
        },

        // 獲取?？当O(jiān)控列表
        getHKmonitorlist(){
            axios({
                method:"get",
                url:"http://***.***.***.***:9007/geoserver/ksp/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=ksp%3Amonitornest&maxFeatures=10000&outputFormat=application%2Fjson",
            }).then(res=>{
                res.data.features.forEach((item,index)=>{
                    let obj = item.properties;
                    this.monitorList.push(obj);
                    if(index<=3){
                        this.playArrays.push("http://***.***.***.***:7012/live/"+item.jkdgbidzlkjg+".m3u8")
                    }
                })
                
            })
        },
        // 市應(yīng)急局監(jiān)控設(shè)備
        getYJmonitorlist(){
            getMethodCommon("/YingJiJu/LoadCameraInfo?county=費縣&pageIndex=1&pageSize=999").then(res=>{
                if(res.code ==  200){
                    this.monitorList2 = res.data;

                }
            })
        },

    }
}
</script>

<style scoped>

.monitor-container{
    width:100%;
    height:100%;
    background:#30645eaa;
    padding:15px;
    background-image: url(/img/biaohui.png);
    background-size:100% 100%;
}

.monitor-list-container{
    width:240px;
    height:100%;
    float:left;
}

.monitor-list-title{
    width:100%;
    height:60px;
    font-size:20px;
    text-indent:15px;
    color:#fff;
    cursor:pointer;
}

.monitor-list-scroll-container{
    width: calc( 100% - 12px);
    height: calc(100% - 60px);
    overflow-y: auto;
    padding-right:12px;
}

.monitor-class-name{
    width:100%;
    height:42px;
    line-height:42px;
    color:#fff;
}
.monitor-item{
    width:100%;
    height:24px;
    line-height:24px;
    color:#cfcfcf;
    font-size:12px;
    text-indent: 4px;
    overflow: hidden;
    cursor: pointer;
}
.monitor-item:hover{
    background:#30645e;
}

.video-container{
    width: calc( 100% - 240px);
    float:right;
    height:100%;
}

.layout-container{
    width:100%;
    height:50px;
}

::-webkit-scrollbar-track,
::-webkit-scrollbar-thumb {
  border: 0;
}

::-webkit-scrollbar {
  height: 10px;
  width: 10px;
  background: transparent;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb {
  padding-top: 100px;
  -webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.25);
  background-color: rgba(0, 0, 0, 0.4);
  min-height: 28px;
  border-radius: 4px;
  background-clip: padding-box;
}

::-webkit-scrollbar-track,
::-webkit-scrollbar-thumb {
  border: 0;
}

::-webkit-scrollbar-thumb:hover {
    -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1),
    inset -1px -1px 0 rgba(0, 0, 0, 0.07);
  background-color: #797979;
}

::-webkit-scrollbar-thumb:active {
  -webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.35);
  background-color: rgba(0, 0, 0, 0.5);
}
</style>

項目截圖：

文章來源地址http://www.zghlxwxcb.cn/news/detail-800945.html

到了這里，關(guān)于前端實現(xiàn)H265編碼的m3u8視頻流播放的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！