整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
里云播放器SDK（ApsaraVideo for Player SDK）是阿里視頻云端到云到端服務(wù)的重要一環(huán)，除了支持點播和直播的基礎(chǔ)播放功能外，還深度融合視頻云業(yè)務(wù)，支持視頻的加密播放、安全下載、首屏秒開、低延時等業(yè)務(wù)場景，為用戶提供簡單、快速、安全、穩(wěn)定的視頻播放服務(wù)。本文銜接上文，詳細介紹web播放器的功能及實現(xiàn)。
播放器架構(gòu)
Aliplayer Web播放器分為H5和Flash兩個，F(xiàn)lash播放器隨著技術(shù)的發(fā)展會逐漸被邊緣化，所以我們以后只做維護，不會更新功能了，重點會放在H5播放器上。H5播放器架構(gòu)主要分四層，底層H5 Video，播放能力和H5原生Video緊密相關(guān)。第二層是基礎(chǔ)播放器，它不依賴于具體業(yè)務(wù)，通過URL的方式來播放。第三層是為各種業(yè)務(wù)場景準備的不同的播放器，可以很容易的擴展，相互隔離不依賴。最上面一層是適配的播放器，會根據(jù)終端類型、瀏覽器類型、播放格式和用戶指定來進行智能適配。
播放器功能
最近，我們在播放器端上也實現(xiàn)了截圖、國際化、變速、UI自定義、微信同層播放、自適應(yīng)播放、加密播放、H5播放flv、自定義插件等功能。后續(xù)，我們還會通過插件的形式實現(xiàn)彈幕、廣告等功能，并會開源到github上，也會支持用戶根據(jù)自己業(yè)務(wù)需求來自定義SDK包。
播放器支持視頻格式
適配播放
我們整個視頻播放的基本原則是H5優(yōu)先，能用H5播放的肯定不用Flash去播放。所以在移動端，我們肯定是用H5來播放的，PC端也依照這個原則盡量使用H5。同時，我們會判斷瀏覽器類型支持哪種播放格式，比如m3u8在PC端IE11以上的瀏覽器才能播放，如果遇到IE11以下的瀏覽器，我們自動會選擇Flash播放。在視頻格式方面，假設(shè)視頻是rtmp和flv，我們會自動選擇Flash播放。另外，如果用戶自主設(shè)置useH5Prism和useFlashPrism屬性，那我們也會依照用戶的選擇。
瀏覽器支持情況
FLASH支持IE8以上，在瀏覽器上啟動允許FLASH運行即可；H5支持IE9以上，m3u8需要在IE11以上才可以運行；其他瀏覽器都也都是可以支持的。
兩種播放方式
source，通過url 去播放
通過點播vid+playauth去播放，第二種方式和視頻云結(jié)合比較緊密
點播播放格式的選擇
點播服務(wù)中轉(zhuǎn)碼生成的視頻格式有很多，包括m3u8、flv、mp4等。播放器有自己的一套邏輯去選擇播放格式。對于H5來說，默認播放低清版本來節(jié)省流量，如果用戶使用了切換清晰度的功能，那我們會默認打開他選擇的版本。格式方面，則默認播放mp4，用戶也可以設(shè)置qualitySort來優(yōu)先播放高清的的版本。對于Flash來說，默認格式順序是m3u8、flv、mp4。
創(chuàng)建播放器
引用正確的JS和CSS文件
添加播放器容器 需要設(shè)置容器的id屬性，另外2.0.1之前的版本要添加prism-player類型。
New Aliplayer創(chuàng)建播放
在線配置，用戶可以預(yù)先體驗下播放器的情況
Aliplayer-Cli創(chuàng)建演示例子
用戶需要演示例子的時候，不需要寫很多代碼，通過這個命令，就可以創(chuàng)建例子，直接體驗AliPlayer。
PC端支持m3u8
播放域名啟用允許跨域訪問
訂閱和取消事件
清晰度切換
H5 1.9.9以后的版本和id+playauth播放方式才支持清晰度切換；支持記憶選擇的清晰度，當選擇的清晰度不能播放時，自動選擇下一個清晰度播放。
手動切換視頻-H5
這個功能播放器內(nèi)比較常見。我們把它分成兩種情況去處理，如果是地址播放，我們通過loadByUrl來播放；如果是vid+playauth播放，我們通過replayByVidAndPlayAuth的方法來播放。
手動切換視頻-flash
地址播放方法與H5的方法一樣，vid+playauth播放則需要先銷毀播放器，再重新創(chuàng)建播放。
不同地址格式的切換
只能先銷毀播放器，再重新選擇正確的播放器播放。Github地址看simple demo：https://github.com/alilmq/aliplayer-simple-demo
![b_3_7]
UI自定義
很多用戶有這個需求，所以我們的UI是可以隱藏掉的。提供了一個skinLayout的屬性，當這個屬性沒有指定值的時候，UI組件是全部顯示。如果是空數(shù)組的時候，UI組件全部不顯示。并且可以自定義組件的顯示和位置，在默認UI基礎(chǔ)上去裁剪，2.3.0版本以后，用戶也可以通過自定義插件的方式自定義自己的UI。
截屏
H5啟用:
FLASH啟用：snapshot:true
H5播放器，播放域名需添加允許跨域訪問的header
支持訂閱snapshoted事件，獲取截屏的時間點和數(shù)據(jù)：
支持設(shè)置截圖的大小和質(zhì)量：
支持添加文字水印：
邊轉(zhuǎn)變播功能
邊轉(zhuǎn)邊播是MTS的功能，播放器可以支持這種場景的播放。第一次觀看的時候調(diào)用MTS API啟動轉(zhuǎn)碼，邊轉(zhuǎn)碼邊播放，而且可以設(shè)置延遲播放。轉(zhuǎn)碼中使用直播播放器，轉(zhuǎn)碼完成后使用點播方式播放。
H5 android微信同層播放
因為H5在android端微信打開時，會自動全屏播放，覆蓋Dom元素。
同層播放一般有兩種業(yè)務(wù)場景，一種是點播的，視頻在某個地方播放，下面的評論、播放列表等,demo地址：https://github.com/alilmq/h5demo
還要一種場景是直播場景，視頻需要全屏。可以通過設(shè)置x5_type:h5啟用同層播放。Demo 地址：https://github.com/alilmq/h5livedemo
另外H5微信同層播放，有兩篇文章可以參考:
http://player.alicdn.com/aliplayer/docs/blogs/how-to-handle-h5-same-layer.html
http://player.alicdn.com/aliplayer/docs/blogs/how-to-handle-h5-same-layer.html
國際化
提供language屬性，用于啟用各種語言，默認為zh-cn，可選值為zh-cn or en-us。
倍速播放
提供UI的版本，只提供了0.5、1、1.5、2四種倍速播放；而setspeed方法，可以隨意設(shè)置倍速播放。這個可能會有一些限制，移動端有的瀏覽器會不支持，比如android微信。
對于直播播放失敗的處理
在播放失敗時候，會嘗試重新播放，觸發(fā)onM3u8Retry事件，事件里可以做一些提示，比如主播離開請稍等；如果幾次嘗試后還是失敗，會出發(fā)livestreamstop事件，事件里做一些直播失敗或結(jié)束的提示。
我們也做了一些輔助工具，方便用戶去接入和排查問題。
診斷工具
通過錯誤碼描述的映射關(guān)系，大概能知道用戶的錯誤所在；
通過vid知道用戶播放的是哪個視頻；
通過uuid這個唯一標識，可以在日志系統(tǒng)中查到用戶的播放狀態(tài)；
通過requestid和播放時間，可以定位到用戶的錯誤是哪次播放的錯誤和具體的播放時間。
這里還有一個診斷的功能，可以知道用戶環(huán)境的具體信息，省去手工獲取視頻的繁瑣，可以快速診斷問題。
地址：http://player.alicdn.com/detection.html
檢測工具
關(guān)于視頻播放失敗，我們提供了三種方式，原生H5、阿里云H5、阿里云Flash。我們把播放的日志調(diào)出來，通過日志來情況來判斷播放失敗的原因。舉個例子，如果用戶剛開始請求數(shù)據(jù)時就失敗的話，那我們會猜測存在鑒權(quán)失敗的情況；如果加載數(shù)據(jù)出錯，那可能是用戶的網(wǎng)絡(luò)的原因；如果是開始播放后出錯，可能就問題就出在解析或播放器不支持等方面。
ffmpeg查看視頻信息
有的用戶只有畫面，沒有聲音。我們可以通過ffmpeg可以看下視頻的格式、流的情況、碼率、幀率等。
最后，阿里云播放器的所有情況都聚合在以下的網(wǎng)站上：
http://player.alicdn.com/detection.html，其中包括幫助文檔、在線配置、診斷工具、產(chǎn)品demo等，大家可以登錄了解詳情。
兩天有個客戶需要把網(wǎng)頁轉(zhuǎn)為pdf，之前也沒開發(fā)過類似的工具，就在百度搜索了一波，主要有下面三種
在百度（我一般用必應(yīng)）搜索“在線網(wǎng)頁轉(zhuǎn)pdf”就有很多可以做這個事的網(wǎng)站，免費的如
各種pdf的操作都有，免費使用，速度一般。
官網(wǎng)地址https://tools.pdf24.org/zh
PDF24 Tools
開源免費項目，使用golang寫的，提供在線轉(zhuǎn)
官網(wǎng)地址http://doctron.lampnick.com/
doctron在線體驗demo
還有挺多其他的，可以自己搜索，但是都不符合我的預(yù)期。
Doctron，這是我今天要介紹的重頭戲。
Doctron是基于Docker、無狀態(tài)、簡單、快速、高質(zhì)量的文檔轉(zhuǎn)換服務(wù)。目前支持將html轉(zhuǎn)為pdf、圖片(使用chrome(Chromium)瀏覽器內(nèi)核，保證轉(zhuǎn)換質(zhì)量)。支持PDF添加水印。
管他的，先把代碼下載下來再說
git clone https://gitcode.net/mirrors/lampnick/doctron.git倉庫
運行
go build
./doctron --config conf/default.yaml運行截圖
轉(zhuǎn)pdf，訪問http://127.0.0.1:8080/convert/html2pdf?u=doctron&p=lampnick&url=<url>，更換鏈接中的url為你需要轉(zhuǎn)換的url即可。
轉(zhuǎn)換效果
然后就可以寫程序去批量轉(zhuǎn)換需要的網(wǎng)頁了，但是我需要轉(zhuǎn)換的網(wǎng)頁有兩個需求
1、網(wǎng)站需要會員登錄，不然只能看得到一部分
2、需要把網(wǎng)站的頭和尾去掉的
這就為難我了，不會go語言啊，硬著頭皮搞了，肯定有個地方打開這個url的，就去代碼慢慢找，慢慢調(diào)試，功夫不負有心人，終于找到調(diào)用的地方了。
第一步：添加網(wǎng)站用戶登錄cookie
添加cookie之前
添加cookie之后
第二步：去掉網(wǎng)站頭尾
chromedp.Evaluate(`$('.header').css("display" , "none");
$('.btn-group').css("display" , "none");
$('.container .container:first').css("display" , "none");
$('.breadcrumb').css("display" , "none");
$('.footer').css("display" , "none")`, &ins.buf),打開網(wǎng)頁后執(zhí)行js代碼把頭尾隱藏掉
第三步：程序化，批量自動生成pdf
public static void createPDF(String folder , String cl , String pdfFile, String urlhref) {
try {
String fileName = pdfFile.replace("/", ":");
String filePath = folder + fileName;
File srcFile = new File(filePath);
File newFolder = new File("/Volumes/disk2/myproject" + File.separator + cl);
File destFile = new File(newFolder, fileName);
if(destFile.exists()){
return;
}
if(srcFile.exists()){
//移動到對應(yīng)目錄
if(!newFolder.exists()){
newFolder.mkdirs();
}
FileUtils.moveFile(srcFile , destFile);
return;
}
if(!newFolder.exists()){
newFolder.mkdirs();
}
String url = "http://127.0.0.1:8888/convert/html2pdf?u=doctron&p=lampnick&url="+urlhref;
HttpEntity<String> entity = new HttpEntity<String>(null, null);
RestTemplate restTemplate = new RestTemplate();
ResponseEntity<byte[]> bytes = restTemplate.exchange(url, HttpMethod.GET, entity, byte[].class);
if (bytes.getBody().length <= 100) {
if(urlList.containsKey(urlhref)){
Integer failCount = urlList.get(urlhref);
if(failCount > 3){
System.out.println("下載失敗：" + cl + " / " + pdfFile +" " + urlhref);
return;
}
failCount++;
urlList.put(urlhref , failCount);
}else{
urlList.put(urlhref , 1);
}
createPDF(folder , cl , pdfFile , urlhref);
}else{
if (!destFile.exists()) {
try {
destFile.createNewFile();
} catch (Exception e) {
e.printStackTrace();
}
}
try (FileOutputStream out = new FileOutputStream(destFile);) {
out.write(bytes.getBody(), 0, bytes.getBody().length);
out.flush();
} catch (Exception e) {
e.printStackTrace();
}
}
} catch (Exception e) {
e.printStackTrace();
}
}最終成果：
文件夾分類存放
pdf文件
我們的項目開發(fā)完成之后通常要做一個演示網(wǎng)站，那么如何防止我們辛苦開發(fā)的網(wǎng)站被別人濫用呢？我們可以通過在網(wǎng)頁上添加水印來注明所有人的信息，像下面這個樣子。
那么如何添加水印呢，今天就來介紹三種比較常用的添加水印的方法。下面所有的網(wǎng)頁都以若依的后臺管理系統(tǒng)為例。
添加的水印效果如圖所示
具體做法是我們定義一個水印的樣式——
floating-watermark，然后在需要被添加水印的標簽中引用這個樣式。樣式案例如下：
.floating-watermark {
position: fixed;//這個屬性使元素相對于瀏覽器窗口固定定位，這意味著即使頁面滾動，元素也會保持在固定位置 top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
//這個屬性設(shè)置了元素的背景圖像。在這里，使用了一個數(shù)據(jù)URI來嵌入一個SVG圖像。這個SVG圖像包含了傾斜的“測試水印”文字
background-image: url('data:image/svg+xml;utf8,<svg xmlns="SVG namespace" width="400" height="400"><text x="50" y="200" font-size="30" fill="rgba(0, 0, 0, 0.1)" transform="rotate(-45, 50, 200)">測試水印</text></svg>');
background-repeat: repeat;
z-index: 1000;//這個屬性設(shè)置了水印的圖層，值越大則越靠上
}使用Canvas來創(chuàng)建滿屏傾斜的水印文字涉及到在Vue組件中使用JavaScript來動態(tài)繪制水印。效果如下。
具體做法是在js中定義一個繪制水印的方法——drawWatermark，然后在組件的mounted生命周期鉤子中調(diào)用drawWatermark方法，以確保在組件加載時繪制并顯示水印。樣例寫法如下。
drawWatermark() {
let canvas = document.createElement('canvas');
const spacing = 300; // 水印間的間距
canvas.width = window.innerWidth * 2; // Canvas的寬度為視口寬度的兩倍
canvas.height = window.innerHeight * 2; // Canvas的高度為視口高度的兩倍
let ctx = canvas.getContext('2d');
ctx.font = '30px Arial'; // 字體大小
ctx.fillStyle = 'rgba(0, 0, 0, 0.1)'; // 字體顏色和透明度
ctx.rotate(-Math.PI / 4); // 將文字旋轉(zhuǎn)45度
?
// 在Canvas上重復(fù)繪制傾斜的文字
for (let x = -canvas.width; x < canvas.width; x += spacing) {
for (let y = -canvas.height; y < canvas.height; y += spacing) {
ctx.fillText('測試水印', x, y);
}
}
?
// 創(chuàng)建一個新的div元素用于顯示水印
const watermarkDiv = document.createElement('div');
watermarkDiv.style.position = 'fixed';
style.top-正在西部數(shù)碼(www.west.cn)進行交易 = '0';
watermarkDiv.style.left = '0';
watermarkDiv.style.width = '100%';
watermarkDiv.style.height = '100%';
watermarkDiv.style.backgroundImage = `url(${canvas.toDataURL()})`;
watermarkDiv.style.backgroundRepeat = 'repeat';
watermarkDiv.style.pointerEvents = 'none';
watermarkDiv.style.zIndex = '9999'; // 設(shè)置高z-index值
?
document.body.appendChild(watermarkDiv);
}最后一種方法是利用第三方工具庫來實現(xiàn)添加水印的效果，這里我推薦
vue-watermark-directive組件。效果如圖所示。
首先我們需要安裝vue-watermark-directive組件。
npm install vue-watermark-directive --save然后在項目中引用組件，修改main.js
import VueWatermark from 'vue-watermark-directive';最后在標簽中使用
<div class="app-container" v-watermark="'測試水印'">這三種方法中Canvas使用靈活，CSS方法和第三方組件簡單易用，大家可以根據(jù)自己項目的情況選擇一種使用。
更多文章推薦公眾號【程序員老J】
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
