有言在先

原理是采用商業(yè)級DRM實現(xiàn)，DRM 許可證費用目前沒有免費服務商，騰訊云價格是0.0056元/次。

另外此功能不兼容安卓，安卓系統(tǒng)無法正常播放視頻！

先展示效果

可以看到截屏時刻出現(xiàn)黑屏，錄屏也能保證全黑狀態(tài)。

DRM介紹

商業(yè)級DRM能夠?qū)崿F(xiàn)媒體內(nèi)容加密保護、防抓包和破解工具破解、防瀏覽器插件破解、防瀏覽器插件截錄屏。

類似于M3U8，它也是提供一個索引文件，之后根據(jù)索引文件去找每一個小節(jié)視頻，播放器自動連貫播放每一小節(jié)，看起來是完整的一個視頻，所以在一定程度上能夠防止抓包。

數(shù)字版權管理（英語：Digital rights management，縮寫為DRM）是一系列訪問控制技術，通常用于控制數(shù)字內(nèi)容和設備在被銷售之后的使用過程。

DRM有時也稱為拷貝保護、復制控制、技術保護措施等，但這些稱呼存在爭議。許多數(shù)字出版社和軟件廠商都使用了DRM，例如亞馬遜、AT&T、AOL、Apple Inc.、Netflix、Google、BBC、微軟、Sony、Valve Corporation（以及其旗下的Steam）等。

商業(yè)級DRM目前常見的解決方案有兩種，分別是 FairPlay（蘋果系平臺） 和 Widevine（谷歌系平臺）。其中，Widevine 支持 L1 和 L3 兩種級別，L1 級別的解密需要專門的硬件 TEE 環(huán)境，對播放端的要求更高。如果設備本身不支持 L1，則會自動嘗試以 L3 級別播放。

因為我們是出售一個使用教學，本身必須使用電腦操作，兼容蘋果系統(tǒng)已經(jīng)意義不大。所以我們文章以Widevine為例，蘋果的FairPlay只需要修改選項，其他內(nèi)容完全一致。

騰訊云操作

在騰訊云搜索云點播服務，開通后付費（量大可以買資源包劃算點）

視頻上傳可以掉接口也可以手動上傳，這里直接參考官方文檔吧

之后選擇轉碼，依舊是支持調(diào)用，我們這里手動轉換下：

?在選項里面帶Widevine就是谷歌內(nèi)核瀏覽器才能播放，其他蘋果手機和安卓手機瀏覽器全無法播放的。FairPlay就是蘋果才能播放的。我們這里選Widevine

攢代碼實現(xiàn)網(wǎng)頁播放器

轉換好之后我們開始攢播放器代碼，這段代碼放在播放頁面最前面。

騰訊云播放使用的是一個類似于token的臨時令牌，支持限制一個令牌最多多少IP播放，我們?yōu)榱烁影踩屆看螢g覽都新生成一個令牌，一個令牌只能播放一次

雖然是Java程序員，還是會寫點PHP的，雖然寫的不太優(yōu)雅...

注意https網(wǎng)站必須設置Scheme為HTTPS，http必須為http，否則無法播放

$head = '你自己的應用頭秘鑰.';
$time = time();
//鏈接5小時內(nèi)有效
$maxTime = 18000;
$str = base64UrlEncode('{"appId":1315****,"fileId":"'.$video_id.'","currentTimeStamp":'.$time.',
"contentInfo":{"audioVideoType":"ProtectedAdaptive","drmAdaptiveInfo":{"widevineDefinition":13},
"imageSpriteDefinition":10},"expireTimeStamp":'.($time + 18000).',"urlAccessInfo":{"t":"'.dechex($time + 18000).'","rlimit":1,"us":"user1",
"domain":"1315****.vod2.myqcloud.com","scheme":"HTTPS"},"drmLicenseInfo":{"expireTimeStamp":'.($time + 18000).'}}');
$hash = signature($head.$str, '自己的播放秘鑰');
$sign = $head.$str.'.'.$hash;

之后HTML代碼：

<video id="player-container-id" height="600px" preload="auto">

在此頁面添加如下JS，進行播放：

    var player = TCPlayer('player-container-id', {
        fileID: '<?php echo $video_id ?>',
        appID: '1315*****',
        psign:'<?php echo $sign?>',
        plugins:{
            DynamicWatermark: {
                type: 'text',
                speed: 0.5,
                content: '漂浮水印文本',
                opacity: 0.5,
                fontSize: '12px',
                color: '#bdbdbd',
            }
        }
    });

上面的漂浮水印文本一般是用戶名或者本次播放的uuid，大家可以自己設置

特殊瀏覽器處理

雖然說是谷歌內(nèi)核通用，實際上部分國內(nèi)開發(fā)的不是特別好和開發(fā)的特別好的雙核瀏覽器都存在問題。

360瀏覽器、火狐瀏覽器：用戶能夠正常錄屏

雙某瀏覽器、小某瀏覽器....等：無法播放

請?zhí)崾居脩羰褂霉雀铻g覽器或者Edge瀏覽器播放！我們接下來禁止用戶使用360瀏覽器和火狐播放，避免視頻被錄屏。

禁止火狐瀏覽器

直接PHP通過UA判斷，如果是火狐就標記一個變量，同時火狐的話不需要生成播放令牌

將上面PHP最后一行換成這個

$hash = signature($head.$str, '********');
if (!$isFireFox) {
    $sign = $head.$str.'.'.$hash;
} else {
    echo '火狐';
    $sign = '';
}

禁止360瀏覽器

360瀏覽器UA無法區(qū)分，只能使用JS代碼，所以我們采用，如果是360就隱藏播放窗口，并且生成個假的窗口，看起來無法播放，引導更換瀏覽器。

    <script>
        function checkIeForNum() {
            return ((navigator.msPointerEnabled == undefined ? true : navigator.msPointerEnabled)
                && (navigator.msDoNotTrack == 1 || window.doNotTrack == 1)
                && ((Number(window.screenX) ? (window.screenLeft - window.screenX != 8) : false)
                    || ((navigator.userAgent.indexOf('MSIE 7.0') != -1 || navigator.userAgent.indexOf('MSIE 8.0') != -1) && console.count == undefined)));
        }
        function checkChromeForNum() {
            var uas = navigator.userAgent.split(' '),
                result = false;
            if (uas[uas.length - 1].indexOf('Safari') == -1) {
                return result;
            }
            for (var key in navigator.plugins) {
                if (navigator.plugins[key].filename == 'np-mswmp.dll') {
                    return !result;
                }
            }
            return result;
        }
        $(document).ready(function () {
            if (navigator.userAgent.indexOf('Safari') != -1) {
                if (checkChromeForNum()) {
                    $(".ke-player").html("")
                    $(".down-tip").css("display", "block")
                }
            } else {
                if(checkIeForNum()) {
                    $(".ke-player").html("")
                    $(".down-tip").css("display", "block")
                }
            }
        })
    </script>

如果是是360或者火狐就會顯示 down-tip 其他瀏覽器會顯示 ke-player?

<div class="down-tip" <?php if ($isFireFox) echo 'style="display:block"';?>>
 <p>您的瀏覽器不支持DRM視頻解密組件！</p>
 <p>請下載 <a  target="_blank">Google Chrome瀏覽器</a> 或 <a  target="_blank">Microsoft Edge瀏覽器</a> 觀看視頻吧~</p>
</div>
<div class="ke-player" <?php if ($isFireFox) echo 'style="display:none"';?>>
 <video id="player-container-id" height="600px" preload="auto">
 </video>
</div>

撒花

這樣就實現(xiàn)了前端禁止視頻截屏的功能。

蘋果電腦的谷歌瀏覽器也能夠正常播放哦！

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

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