整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
多站點都會使用到視頻. HTML5 提供了展示視頻的標準。
檢測您的瀏覽器是否支持 HTML5 視頻：
檢測
Web站點上的視頻
直到現在，仍然不存在一項旨在網頁上顯示視頻的標準。
今天，大多數視頻是通過插件（比如 Flash）來顯示的。然而，并非所有瀏覽器都擁有同樣的插件。
HTML5 規定了一種通過 video 元素來包含視頻的標準方法。
瀏覽器支持
Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持 <video> 元素.
注意: Internet Explorer 8 或者更早的IE版本不支持 <video> 元素。
HTML5 (視頻)- 如何工作
如需在 HTML5 中顯示視頻，您所有需要的是：
實例
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的瀏覽器不支持Video標簽。
</video>
<video> 元素提供了 播放、暫停和音量控件來控制視頻。
同時<video> 元素元素也提供了 width 和 height 屬性控制視頻的尺寸.如果設置的高度和寬度，所需的視頻空間會在頁面加載時保留。。如果沒有設置這些屬性，瀏覽器不知道大小的視頻，瀏覽器就不能再加載時保留特定的空間，頁面就會根據原始視頻的大小而改變。
<video> 與</video> 標簽之間插入的內容是提供給不支持 video 元素的瀏覽器顯示的。
<video> 元素支持多個 <source> 元素. <source> 元素可以鏈接不同的視頻文件。瀏覽器將使用第一個可識別的格式：
視頻格式與瀏覽器的支持
當前， <video> 元素支持三種視頻格式： MP4, WebM, 和 Ogg:
| 瀏覽器 | MP4 | WebM | Ogg |
|---|---|---|---|
| Internet Explorer | YES | NO | NO |
| Chrome | YES | YES | YES |
| Firefox | YES | YES | YES |
| Safari | YES | NO | NO |
| Opera | YES (從 Opera 25 起) | YES | YES |
MP4 = 帶有 H.264 視頻編碼和 AAC 音頻編碼的 MPEG 4 文件
WebM = 帶有 VP8 視頻編碼和 Vorbis 音頻編碼的 WebM 文件
Ogg = 帶有 Theora 視頻編碼和 Vorbis 音頻編碼的 Ogg 文件
視頻格式
| 格式 | MIME-type |
|---|---|
| MP4 | video/mp4 |
| WebM | video/webm |
| Ogg | video/ogg |
HTML5 <video> - 使用 DOM 進行控制
HTML5 <video> 和 <audio> 元素同樣擁有方法、屬性和事件。
<video> 和 <audio>元素的方法、屬性和事件可以使用JavaScript進行控制.
其中的方法有用于播放、暫停以及加載等。其中的屬性（比如時長、音量等）可以被讀取或設置。其中的 DOM 事件能夠通知您，比方說，<video> 元素開始播放、已暫停，已停止，等等。
例中簡單的方法，向我們演示了如何使用 <video> 元素，讀取并設置屬性，以及如何調用方法。
實例 1
為視頻創建簡單的播放/暫停以及調整尺寸控件：
播放/暫停 放大 縮小 普通
上面的例子調用了兩個方法：play() 和 pause()。它同時使用了兩個屬性：paused 和 width。
HTML5 Video 標簽
| 標簽 | 描述 |
|---|---|
| <video> | 定義一個視頻 |
| <source> | 定義多種媒體資源,比如 <video> 和<audio> |
| <track> | 定義在媒體播放器文本軌跡 |
定義H5播放器，在微信以及一些Android和iOS瀏覽中播放，存在容易被自帶瀏覽器接管的情況。接管后播放時，播放器的一些功能設置就不再顯示，比如水印信息等。
如果設置安卓和iOS手機在微信里打開不全屏的話，就可以正常顯示自定義播放器的參數，比如水印。
除了H5播放器可以設置是否全屏外，要想實現播放器自定義的一些效果更好展示，還可以進行如下配置：
1、android下提示，讓用戶使用chrome 70以上內核的瀏覽器（安卓自帶的）去播放，不允許他們在微信這些播放；
2、IOS下，也是chrome下可以； IOS下還可以支持微信播放，如果不允許全屏的話，也可以有水印。
3、電腦版下沒問題，基本主流瀏覽器都可以實現H5播放器自定義參數顯示。
html5 播放器默認是可以下載視頻的，在默認的控制器（給 video 標簽添加 controls 屬性開啟）上會有下載菜單， 即使不使用默認提示的控制器，右鍵彈出的上下文菜單中也會有保存視頻的選項。
通過 controlslist 屬性可以設置瀏覽器提供的控制器，不讓下載菜單顯示出來。controlslist 還可以設置不顯示全屏等功能同，但是瀏覽器 支持較差，尤其是移動端瀏覽器。
<video src="test.mp4" playsinline autoplay="false" controls controlslist="nodownload"></video>將 controlslist 的值設置為 nodownload ，就不會出現下載菜單了，不過 PC 上點擊右鍵的上下文菜單的保存視頻選項仍然有用，還是很容易被下載。
如果是通過自定義樣式來控制播放暫時等操作的控制條，還可以將 video 禁右鍵或者蒙上一層 div 來阻止彈出上下文菜單，防止下載。
雖然通過 controlslist 可以防止下載，但是有些瀏覽器不支持，很多移動端的瀏覽器會直接接管播放器。 如果用戶懂一點技術，捕獲視頻文件的鏈接，就可以直接打開鏈接進行下載了。 我們可以利用 Media Source Extensions API 來給文件做加密，這套技術本來是用于擴展的，通過擴展可以兼容更多 的視頻格式，可以認為是前端的一套自定義轉碼的接口，將文件實時轉碼成瀏覽器支持的格式。
服務器端做好視頻的加密，將原視頻文件通過對稱性加密生成一個加密新文件，客戶端將加密的新文件加載后進行解密， 然后將解密后的原文件內容通過 MediaSource 推送，完成視頻的播放。
<canvas height="240" width="320" id="player" onclick="playOrPause()"></canvas>const video = document.getElementById('videoId')
// 視頻編碼譯碼器，使用工具 mp4info 可以查看
const mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"'
const mediaSource = new MediaSource()
video.src = URL.createObjectURL(mediaSource)
mediaSource.addEventListener('sourceopen', e => {
const sourceBuffer = mediaSource.addSourceBuffer(mimeCodec)
// 請求加密文件，然后解密添加到 sourceBuffer，也可以將文件裁切成多個部分,分多次加載
fetch('./chunk')
.then(async resp => {
const blob = await resp.blob()
const buf = await blob.arrayBuffer()
sourceBuffer.addEventListener('updateend', () => {
// 如果是多個文件塊，可以在判定已經添加完所有塊后結束（一般會搞個塊列表做比對的）
mediaSource.endOfStream()
})
// decode 是自定義的解碼函數，將請求到的加密文件 chunk 內容解密成為真正的 mp4 文件
// ，要與前面的 mimeCodec 對應，否則會有錯誤
// 這個示例省略了很多錯誤處理，要處理錯誤需要對 mediaSource 和 sourceBuffer 做 error 事件處理
sourceBuffer.appendBuffer(decode(buf))
console.log('appendBuffer after')
})
.catch(console.error)
})這樣處理后，通過控制臺 network 查看到的是加密文件的請求地址，拿到后也不能播放，查看 video 標簽源地址是 生成的臨時地址，也無法直接打開。并且，通過 Media Source Extensions API 還可以實現視頻分塊做按需加載。 其實 video 標簽播放視頻也會自動按需請求內容（僅部分瀏覽器），需要服務器做好對 Range 消息頭的支持，根據參數來返回部分文件內容。 不過 Media Source Extensions API 的兼容性不是很好，ie 和 safari 都是不支持的， 新版本 mac 上的 safari 不知道是否能支持。經過測試，小部分移動端瀏覽器也不支持，無法顯示出視頻，大部分移動端瀏覽都可以支持的很好。 有些網站的播放器做了兼容，對于不支持 MSE 的瀏覽器仍然使用 video 標簽播放原 mp4 文件。
基于 canvas 也是一種方案，好處是不會被瀏覽器識別成視頻，也就不會被接管。很多不太規范的移動端瀏覽器 都是直接接管視頻播放器，自定義的播放器樣式完全沒用，不會被顯示出來，使用 canvas 就可以解決這個問題。
const canvas = document.getElementById('player')
/** @type {CanvasRenderingContext2D} */
const ctx = canvas.getContext('2d')
const video = document.createElement('video')
video.addEventListener('canplay', e => {
// 渲染封面
this.renderCover()
})
fetch('./test.mp4')
.then(async resp => {
const blob = await resp.blob()
video.src = URL.createObjectURL(blob)
})
.catch(console.error)
function playOrPause() {
if (video.ended) {
return
}
if (video.paused) {
video.play()
startRender()
} else {
video.pause()
}
}
function startRender() {
requestAnimationFrame(() => {
renderVideo()
if (!video.paused && !video.ended) {
startRender()
}
})
}
function renderCover() {
ctx.clearRect(0, 0, 320, 240)
ctx.fillStyle = '#000000'
ctx.fillRect(0, 0, 320, 240)
ctx.font = '40px Arial'
ctx.fillStyle = '#ffffff'
const text = '點擊播放'
const m = ctx.measureText(text)
ctx.fillText(text, 320 / 2 - m.width / 2, 240 / 2 + 40 / 2)
}
function renderVideo() {
ctx.clearRect(0, 0, 320, 240)
ctx.drawImage(video, 0, 0, 320, 240)
if (video.paused) {
ctx.font = '40px Arial'
ctx.fillStyle = '#ffffff'
const text = '已暫停'
const m = ctx.measureText(text)
ctx.fillText(text, 320 / 2 - m.width / 2, 240 / 2 + 40 / 2)
}
}以上僅僅是非常簡單的 demo，這個方案真要完善工作量還是挺大的，除操作條和字幕功能外，視頻全屏還需要做一定的重新渲染處理， 有些瀏覽器還不支持全屏 API (requestFullscreen)，導致沒有辦法將視頻全屏展示。 即便如此，也無法保證百分百不能被下載， 有些瀏覽器還有媒體嗅探功能，當請求了媒體文件后，就會被檢測到，提示用戶檢測到有媒體文件， 詢問用戶是否要下載。
經過我對某個移動端瀏覽器的測試，改 content-type 和后綴名也不行，只要請求的是視頻文件就會被檢測到。 只有把文件加密，請求的是加密文件，不是真正的視頻文件，這樣就不能被檢測到了，然后客戶端解密后再播放。
實測這個方案兼容性也不是很好，部分移動端瀏覽器會渲染不出來視頻內容，有些還會出現卡頓和圖像錯亂。不過微信內置 以及火狐等一些較為先進的移動端瀏覽器支持的都比較好。不過，使用了 canvas 方案就沒有一些原生功能的支持的，如 小窗播放（畫中畫模式）。
經過我的測試，對 MSE 和 canvas 方案無法支持的瀏覽器，恰恰是一些以下載視頻為特色的移動端瀏覽器， 這些瀏覽器內核可能也比較舊，或者是因為修改內核導致的不兼容，不考慮這些瀏覽器 MSE 應該是最佳方案， 因為 MSE 可以實現按需漸近加載視頻。
由于視頻本身就非常耗資源，即時加密對服務器要求高，最好是先加密好。 加密必須是對稱性的，能加密也能解密，通過破解前端代碼掌握解密方法，仍然有辦法解開視頻內容。 如果視頻是提前加密好再存儲的，也不好去搞動態密鑰。
html5 視頻播放器想要下載并做好兼容是非常困難的，基本上不太可能。有些對版權保護比較嚴格的網站，采取了 只能使用客戶端看視頻的方案，體驗上就差一些了。比如 cctalk 這個平臺，視頻作者可以設置保護，對于需要保護的 視頻只能通過客戶端觀看，其它的視頻仍然可以網頁上直接播放。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
