序員必知的HTML5 video視頻二三事

2021-10-12 14:46 更新

HTML5支持直接播放視頻，而這背后涉及到復(fù)雜的視頻格式之爭，甚至還牽涉到所有的電子影像設(shè)備？在過去乃至現(xiàn)在，flash仍是網(wǎng)頁上最好的解決視頻的方法，諸如優(yōu)酷、土豆之流的視頻網(wǎng)站、還有像蝦米那樣的在線音樂網(wǎng)站，仍在使用flash提供播放服務(wù)?，F(xiàn)在這種狀況將會隨著 HTML5 的發(fā)展而改變。HTML <video> 適用于HTML 5+，用于定義在線觀看的視頻流媒體。


HTML5 (視頻)- 如何工作

如需在 HTML5 中顯示視頻，您所有需要的是：

實(shí)例

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
您的瀏覽器不支持Video標(biāo)簽。
</video>

嘗試一下 ?

HTML video視頻教程


在過去，音視頻需要通過第三方插件來處理（這樣引發(fā)的問題是：并不是所有操作系統(tǒng)或者設(shè)備都能使用）流覽器與插件之間的通信被局限住了，而且多媒體就像一個黑盒子。HTML5出現(xiàn)之后，所有主流瀏覽器都可以支持本地音視頻了（包括IE瀏覽器），雖然這個過程需要讓您的媒體文件進(jìn)行雙份的編碼（因?yàn)镮E 和Safari只支持Royalty-encumbered標(biāo)準(zhǔn)的編碼）。有了HTML5，突然之間，video可以跟CSS一起排樣式了：您可以用半透 明的視頻相互覆蓋，設(shè)置邊界與背景圖片，旋轉(zhuǎn)盤旋等變換，以及其他各種精彩的變形應(yīng)用。


但是，有一個核心問題，卻沒有得到解決。HTML5沒有規(guī)定，瀏覽器到底應(yīng)該播放哪一種格式的視頻。瀏覽器廠商可以自行選擇支持的格式。


怎么讓所有瀏覽器支持HTML5 video視頻標(biāo)簽？

使用 HTML5 的video可以很方便的使用 JavaScript 對視頻內(nèi)容進(jìn)行控制等等，功能十分強(qiáng)大，同時代碼比較少加快加載速度。此外跨平臺性比較好，特別是一些平板、手機(jī)等。例如蘋果公司的產(chǎn)品不支持flash僅支持HTML5中的video功能。但是 HTML5 的兼容性問題是個硬傷，我們可以在網(wǎng)頁中使用 video 來播放視頻，但使用早期瀏覽器的訪問者可能無法正常觀看這個視頻。此外，由于視頻編碼器的歷史淵源導(dǎo)致各種瀏覽器支持的視頻格式不同。應(yīng)對這些問題，想在網(wǎng)頁中使用 HTML5 video 功能，可以按照下面三個步驟操作。

1、提前準(zhǔn)備好多格式視頻文件

由于編碼器的版權(quán)問題，導(dǎo)致不同瀏覽器對視頻格式的兼容性不同。目前沒有一個視頻格式兼容所有瀏覽器，唯一的解決方法就是把視頻轉(zhuǎn)換成多種格式。


首先要準(zhǔn)備一個 mp4 格式的視頻，可以在蘋果設(shè)備中使用；其次要準(zhǔn)備 ogv 格式的視頻，用在火狐瀏覽器中；最后要準(zhǔn)備一下 webm 格式的視頻，這個可以用在谷歌瀏覽器等。webm 是谷歌提出的，開源、免費(fèi)，很有可能成為兼容所有瀏覽器的視頻格式。


準(zhǔn)備多格式瀏覽器的麻煩之處在于轉(zhuǎn)換格式。視頻轉(zhuǎn)換工具國內(nèi)的功能比較少，轉(zhuǎn)換格式可能沒有上面后兩個，而且質(zhì)量良莠不齊，往往需要注冊才能使用。推薦一個國外的工具 Online converter ，在線免費(fèi)視頻轉(zhuǎn)換工具。甚至不用安裝軟件，直接選擇相應(yīng)的目標(biāo)格式，然后上傳視頻，配置一下參數(shù)就可以轉(zhuǎn)換出來了。沒有合適工具的朋友，可以嘗試一下。


2、編寫對應(yīng) HTML5 video 代碼

HTML5 中的 video 實(shí)際上就是一個簡單的標(biāo)簽，包含了一些視頻相關(guān)信息等。下面直接給出具體代碼，然后簡單解釋一下：


XML/HTML Code

<video width=”800” height=”374”>  
    <source src=”my_video.mp4” type=”video/mp4” />  
    <source src=”my_video.ogv” type=”video/ogg” />  
    <source src=”my_video.webm” type=”video/webm” />  
    你瀏覽器不支持 video 功能，點(diǎn)擊這里下載視頻： <a href=”video.webm”>下載視頻</a>.   
</video>  

video 標(biāo)簽表示這里是一個視頻，width、height 屬性分別表示這個視頻內(nèi)容的寬高（單位像素）。video 標(biāo)簽中可以包含 source 標(biāo)簽，source 標(biāo)簽用來表示引用的視頻和視頻的格式、類型。為了保證向下的兼容性，我們還在 video 標(biāo)簽中加了一句提示，這句話在支持 video 標(biāo)簽的瀏覽器中是不會顯示的，如果不支持就會顯示出來。這里，還增加了一個視頻的下載地址，如果瀏覽器不支持，可以讓用戶選擇下載下來看。

特別需要注意一點(diǎn)，你的主機(jī)必須能正確的處理這事些視頻請求。確保你的主機(jī)被請求這些視頻的時候會在 Content-Type 頭發(fā)送正確的 MIME 類型。如果你不清楚，可以咨詢一下主機(jī)服務(wù)商，也可以自己添加。如果主機(jī)支持 .htaccess ，可以在 .htaccess 文件中增加下面語句：


代碼如下:
AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm


大體就是這樣，比較簡單，更加具體的關(guān)于 video 的使用方法，可以搜索一下，在這里不再贅述。


3、為舊版瀏覽器做兼容

前面說過，如果瀏覽器不支持 video ，將會把 video 中的提示內(nèi)容顯示出來。那么對付老舊瀏覽器，我們可以用傳統(tǒng)的 flash 來替換這個提示內(nèi)容。這樣，當(dāng)瀏覽器不兼容 video 標(biāo)簽的時候，就會顯示出 flash 版本的視頻。例如：

XML/HTML Code


<video width=”800” height=”374”>  
    <source src=”my_video.mp4” type=”video/mp4” />  
    <source src=”my_video.ogv” type=”video/ogg” />  
<object width="800" height="374" type="application/x-shockwave-flash" data="fallback.swf">  
    <param name="movie" value="fallback.swf" />  
    <param name="flashvars" value="autostart=true&file=video.flv" />  
</object>  
</video>  


直接按照原來正常的 flash 引入方法寫進(jìn) video 標(biāo)簽中即可。這樣，我們就實(shí)現(xiàn)了跨瀏覽器兼容的 video 功能使用。


html5 video 試看怎么實(shí)現(xiàn)？

new個video，指定播放列表的第一個視頻路徑為src。監(jiān)聽end事件，回調(diào)里面把video的src改成列表的下一個，再play

代碼示例：
var vList = ['視頻地址url1', 'url2', '...']; // 初始化播放列表
var vLen = vList.length; // 播放列表的長度

var curr = 0; // 當(dāng)前播放的視頻
var video = new Video();
video.addEventListener('end', play);
play();

function play(e) {
   video.src = vList[curr];
   video.load(); // 如果短的話，可以加載完成之后再播放，監(jiān)聽 canplaythrough 事件即可
   video.play();

   curr++;
   if (curr >= vLen) curr = 0; // 播放完了，重新播放
   }

可以實(shí)現(xiàn)html5 播放多個視頻。一個接一個的播放。

怎么實(shí)現(xiàn) html5 video 視頻暫停后加載指定的圖片？

用戶播放視頻后，緩沖時間和用戶點(diǎn)暫停后加載指定的圖片必須帶超鏈接功能怎么實(shí)現(xiàn)？

先用絕對定位創(chuàng)建一個廣告圖片的圖層,監(jiān)測video的暫停事件,將隱藏的廣告圖片顯示出來出來就好了。

html5 video fullScreen全屏實(shí)現(xiàn)方式

fullScreen

在html5中，全屏方法可以適用于很多html元素，不僅僅是video

代碼如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>全屏問題</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta http-equiv="imagetoolbar" content="no"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<style type="text/css">
*{
padding: 0px;
margin: 0px;
}

body div.videobox{
width: 400px;
height: 320px;
margin: 100px auto;
background-color:#000;
}

body div.videobox video.video
{
width: 100%;
height: 100%;
}

:-webkit-full-screen {

}

:-moz-full-screen {

}

:-ms-fullscreen {

}

:-o-fullscreen {

}

:full-screen { 

}

:fullscreen {

}

:-webkit-full-screen video {
width: 100%;
height: 100%;
}
:-moz-full-screen video{
width: 100%;
height: 100%;
}
</style>
</head>
<body>


<div id="videobox">

<video controls="controls" preload="preload" id="video" poster="poster.jpg">
<source src="./movie.ogg" type="video/ogg" />
<source src="./movie.mp4" type="video/mp4" />
<source src="./movie.webm" type="video/webm" />
<object data="./movie.mp4" width="100%" height="100%">
<embed width="100%" height="100%" src="./movie.swf" />
</object>

</video>
<button id="fullScreenBtn">全屏</button>
</div>


<script type="text/javascript">

//反射調(diào)用
var invokeFieldOrMethod = function(element, method) 
{
var usablePrefixMethod;
["webkit", "moz", "ms", "o", ""].forEach(function(prefix) {
if (usablePrefixMethod) return;
if (prefix === "") {
// 無前綴，方法首字母小寫
method = method.slice(0,1).toLowerCase() + method.slice(1); 
}
var typePrefixMethod = typeof element[prefix + method];
if (typePrefixMethod + "" !== "undefined") {
if (typePrefixMethod === "function") {
usablePrefixMethod = element[prefix + method]();
} else {
usablePrefixMethod = element[prefix + method];
}
}
});

return usablePrefixMethod;
};

//進(jìn)入全屏
function launchFullscreen(element) 
{
//此方法不可以在異步任務(wù)中執(zhí)行，否則火狐無法全屏
if(element.requestFullscreen) {
element.requestFullscreen();
} else if(element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if(element.msRequestFullscreen){ 
element.msRequestFullscreen(); 
} else if(element.oRequestFullscreen){
element.oRequestFullscreen();
}
else if(element.webkitRequestFullscreen)
{
element.webkitRequestFullScreen();
}else{

var docHtml = document.documentElement;
var docBody = document.body;
var videobox = document.getElementById('videobox');
var cssText = 'width:100%;height:100%;overflow:hidden;';
docHtml.style.cssText = cssText;
docBody.style.cssText = cssText;
videobox.style.cssText = cssText+';'+'margin:0px;padding:0px;';
document.IsFullScreen = true;

}
}
//退出全屏
function exitFullscreen()
{
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if(document.oRequestFullscreen){
document.oCancelFullScreen();
}else if (document.webkitExitFullscreen){
document.webkitExitFullscreen();
}else{
var docHtml = document.documentElement;
var docBody = document.body;
var videobox = document.getElementById('videobox');
docHtml.style.cssText = "";
docBody.style.cssText = "";
videobox.style.cssText = "";
document.IsFullScreen = false;
}
}
document.getElementById('fullScreenBtn').addEventListener('click',function(){
launchFullscreen(document.getElementById('video')); 
window.setTimeout(function exit(){
//檢查瀏覽器是否處於全屏
if(invokeFieldOrMethod(document,'FullScreen') || invokeFieldOrMethod(document,'IsFullScreen') || document.IsFullScreen)
{
exitFullscreen();
}
},5*1000);
},false);

</script>
</body>

</html>

html5 video封面poster圖片填充方法

html5的視頻封面尺寸被強(qiáng)制縮小了，需要填充整個播放器的，應(yīng)該怎么做？

圖片填充


html5的video屬性并沒有支持處理poster的尺寸問題，有一個hacker的方法：The answer is actually quite simple. Instead of providing our poster image as a value to the poster attribute, we define it as a background image for our video element, and use the background-size property to tell the browser that the image is to cover the element in question:


將poster頁面設(shè)置為一個透明的圖片或者不存在的值，這樣瀏覽器就會無法顯示poster，然后通過設(shè)置播放器的css背景background，將我們需要的背景圖放進(jìn)去，并且填充背景，并且我們用background-size屬性去告訴瀏覽器，這個播放器或者這個元素被這個圖片覆蓋。


video{
    width: 100%;
    height: 100%;
    background:transparent url('img/1.jpg') 50% 50% no-repeat;


    //下面就是background-size，每種瀏覽器都寫一個配置
    -webkit-background-size:cover;
    -moz-background-size:cover;
    -o-background-size:cover;
    background-size:cover;
}


詳細(xì)代碼：

< !DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title></title>
        <style type="text/css">
        .video-container1{
            width: 400px;
            height: 400px;
            border: solid;
        }
        .video1{
            width: 100%;
            height: 100%;
        }
        .video-container2{
            width: 400px;
            height: 400px;
            border: solid;
        }
        .video2{
            width: 100%;
            height: 100%;
            background:transparent url('1.jpg') 50% 50% no-repeat;
            -webkit-background-size:cover;
            -moz-background-size:cover;
            -o-background-size:cover;
            background-size:cover;
        }
        </style>
    </head>
    <body>
    <div class="video-container1">
        <video class="video1" src="oceans.mp4" poster="1.jpg" controls>

        </video>
    </div>
    <div class="video-container2">
        <video class="video2" src="oceans.mp4" poster="2.jpg" controls>

        </video>
    </div>
    </body>
</html>

以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號