當前位置：首頁 > 人文社科 > 生活经验 >内容正文

生活经验

使用html5进行视频播放

發布時間：2023/11/27 生活经验 33 豆豆

生活随笔收集整理的這篇文章主要介紹了使用html5进行视频播放小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

一直以來網頁大多是使用 flash 來播放視頻。在目前唱衰 flash 的環境下，HTML5 為我們帶來了一個網頁內視頻播放的解決方案—— <video>標簽。

在HTML5 中，可以通過HTML標簽“audio”和“video”來支持嵌入式的媒體，使開發者能夠方便地將媒體嵌入到HTML文檔中。

視頻格式

當前，video 元素支持三種視頻格式：

Ogg = 帶有 Theora 視頻編碼和 Vorbis 音頻編碼的 Ogg 文件
MPEG4 = 帶有 H.264 視頻編碼和 AAC 音頻編碼的 MPEG 4 文件
WebM = 帶有 VP8 視頻編碼和 Vorbis 音頻編碼的 WebM 文件

嵌入媒體

html5嵌入媒體就和使用 <img> 標簽嵌入圖片一樣簡單，你只需要一個 <video> 標簽就可以：

<video src="../video/2.ogg" controls>
</video>

src 屬性來指定想要播放的視頻文件，controls 屬性可以顯示視頻播放控件（默認不顯示）。

可以在 <video> 標簽中設置內容，這些內容將在瀏覽器不支持 <video> 時展示：

<audio src="audio.ogg" controls autoplay loop>
<p>你的瀏覽器不支持video標簽</p>
</audio>

播放屬性

video 標簽中可以設置一些屬性來對播放器進行簡單的控制。

比如規定播放器大小為640px * 480px：

<video src="../video/2.ogg" height="480" width="640" controls><p>你的瀏覽器不支持video標簽</p>
</video>

height 和 width 屬性的單位都是 pixels，即像素。如果設置這些屬性，在頁面加載時會為視頻預留出空間。如果沒有設置這些屬性，那么瀏覽器就無法預先確定視頻的尺寸，這樣就無法為視頻保留合適的空間。結果是，在頁面加載的過程中，其布局也會產生變化。

再比如下面這個例子：

<video src="../video/2.ogg" height="480" width="640" autoplay loop muted controls><p>你的瀏覽器不支持video標簽</p>
</video>

這個例子中又增加了三個屬性：
autoplay 屬性可以讓視頻在準備完畢后自動播放；
loop 屬性規定視屏循環播放，即播放完畢后再次從頭開始播放； muted 屬性讓視頻播放時默認是靜音狀態

接下來再看一個例子：

<video src="../video/2.ogg" height="480" width="640" preloader="auto" poster="../video/show.png" controls><p>你的瀏覽器不支持video標簽</p>
</video>

這里出現兩個屬性： preloader 告訴了視頻在頁面加載時進行加載，并預備播放。如果使用 "autoplay"，則忽略該屬性。 preloader 有三個屬性值可設置：

"none" 不緩沖文件
"auto" 緩沖音頻文件
"metadata" 僅僅緩沖文件的元數據 poster 則設定了視頻的展示圖像，包括播放前的展示圖像和下載的展示圖像；如果未設定此屬性，一般情況下播放前視頻區是黑色的。

上面三個例子包含了html5 <video> 標簽到目前新增的所有屬性，整理如下：

height 播放器高度
width 播放器寬度
autoplay 視頻準備完畢后自動播放
controls 顯示包含“播放”、“進度條”、“全屏”等操作組件的播放控件
loop 設定視頻循環播放
muted 靜音播放視頻
preload 視頻在頁面加載時進行加載，并預備播放。如果使用 "autoplay"，則忽略該屬性。
poster 視頻展示的圖像，即視頻播放前或下載時展示的圖像

<source> 標簽

可以在 <video> 標簽內使用 <source> 標簽來指定多個播放文件，來為不同的瀏覽器提供可支持的編碼格式。例如：

<video controls><source src="../video/2.ogg" type="video/ogg"><source src="../video/2.mp4" type="video/mp4"><p>你的瀏覽器不支持video標簽</p>
</video>

瀏覽器會先加載 2.ogg，如果不支持ogg格式或視頻不存在，則會加載2.MP4，以此類推。

<source> 標簽里，需要通過 src 來指定文件，通過 type 屬性來指定文件格式。

<track> 標簽

想要指定字幕文件，可以使用 <track> 標簽；track 使用方式與 source 相同。

<video controls><source src="../video/2.ogg" type="video/ogg"><source src="../video/2.mp4" type="video/mp4"><track kind="captions" src="sampleCaptions.vtt" srclang="en"><track kind="descriptions" src="sampleDescriptions.vtt" srclang="en"><track kind="chapters" src="sampleChapters.vtt" srclang="en"><p>你的瀏覽器不支持video標簽</p>
</video>

<track> 標簽可以用于規定字幕文件或其他包含文本的文件。

<track> 標簽屬性包括：

src 源文件
kind 指定文件的使用目的，默認值為 subtitles ，可選值包括：
- subtitles 定義此文件是字幕文件，就是大家熟悉的視頻底部字幕了
- captions 將在播放器中顯示的簡短說明
- descriptions 視頻內容的文本描述，適用于盲人或者視頻不可見時的提供的音頻描述。
- chapters 定義章節，用于導航媒介資源
- metadata 提供給腳本使用的內容，對用戶不可見
label 為字幕文件指定一個名字，以供瀏覽器使用；當瀏覽器需要列出可用的字幕文件時，會使用此名字。
srclang 軌道的語言，若、當 kind 屬性值為 "subtitles"時，該屬性是必需的

雖然 <track> 標簽為 video 提供了豐富的文本內容支持，但是目前瀏覽器對于 track 的支持率很不樂觀。

以上簡單介紹了HTML5中video標簽的使用方法。下一篇文章計劃介紹video事件相關內容。想要進行更深入的了解可以在此查看文檔。

使用html5進行視頻播放（二）在播放視頻時，經常需要對播放進行控制。這時我們就需要使用 HTML5 <video> 元素的方法、屬性和事件。

暫停/播放

video 的 play()、pause() 方法分別用于實現視頻的播放、暫停。

通過對 video 標簽的 paused 屬性進行判斷，可以知道當前視頻的播放狀態。視頻處于播放狀態時，paused 為 false；處于暫停狀態時， paused 為 true。

示例：

<video id="video" preloader poster="../video/show.png" height="480" width="640"><source src="../video/trailer.MP4" type="video/mp4">
</video>
<button id="play_btn" type="button"></button>

var v = document.getElementById('video');var playBtn = document.getElementById('play_btn');playBtn.textContent = '>';playBtn.addEventListener("click", function(){if(v.paused){v.play();playBtn.textContent = '||';}else{v.pause();playBtn.textContent = '>';}
});

音量

通過 volume 屬性可以控制播放音量。
volume 的值在 0~1 之間。

<video id="video" preloader poster="../video/show.png" height="480" width="640"><source src="../video/trailer.MP4" type="video/mp4">
</video>
<div>音量<button id="vol_inc_btn" type="button">+</button><button id="vol_dec_btn" type="button">-</button>
</div>

var v = document.getElementById('video');var volIncBtn = document.getElementById('vol_inc_btn');
var volDecBtn = document.getElementById('vol_dec_btn');volIncBtn.addEventListener("click", function(){v.volume > 0.9?v.volume = 1:v.volume += 0.1;
})volDecBtn.addEventListener("click", function(){v.volume < 0.1?v.volume = 0:v.volume -= 0.1;
})

muted 屬性表示是否靜音。值為 true 時，視頻被靜音。

<button id="muted_btn" type="button">靜音</button>

var mutedBtn = document.getElementById('muted_btn');mutedBtn.addEventListener("click", function(){v.muted = !v.muted;mutedBtn.textContent = v.muted?'恢復':'靜音';})

播放時間

video 的 currentTime 屬性用來獲取當前播放的位置。duration 屬性表示當前資源的長度。利用這兩個屬性，可以實現當前時刻/總長度格式的時間顯示。

<font id="now_time" size="3"></font>/<font id="duration" size="3"></font>

var nowTime = document.getElementById('now_time');
var duration = document.getElementById('duration');//初始值設為0
nowTime.textContent = 0;
duration.textContent = 0;//currentTime 和 duration 單位都是秒，我們寫一個函數來將時間顯示格式變為 mm:ss。
function parseTime(time){time = Math.floor(time);var _m, _s;_m = Math.floor(time/60);_s = time - _m*60;if(_m<10){_m = '0' + _m;}if(_s<10){_s = '0' + _s;}return _m + ':' + _s
}v.addEventListener('timeupdate', function(){nowTime.textContent = parseTime(v.currentTime);
})v.addEventListener('loadedmetadata', function(){console.log('loadedmetadata')duration.textContent = parseTime(v.duration);
})

這里用到了兩個事件：timeupdate 和 loadedmetadata。

timeupdate 事件在播放時間改變時觸發，在這里我們監聽播放時間的改變，然后同步更新顯示。

loadedmetada 在成功獲取資源長度時觸發。

進度條

在播放器中進度條是標配，我們在這里也簡單實現以下進度條功能。

<div id="progressWrap"><div id="playProgress"></div>
</div>

var progressWrap = document.getElementById("progressWrap");
var playProgress = document.getElementById("playProgress");//計算當前進度條顯示長度，利用前面說過的 currentTime 和 duration。
function getProgress(){var percent = v.currentTime / v.duration;playProgress.style.width = percent * (progressWrap.offsetWidth) + "px";
}// 鼠標在播放條上點擊時進行捕獲并進行處理
function videoSeek(e){if(v.paused || v.ended){v.play();}enhanceVideoSeek(e);
}
function enhanceVideoSeek(e){var length = e.pageX - progressWrap.offsetLeft;var percent = length / progressWrap.offsetWidth;playProgress.style.width = percent * (progressWrap.offsetWidth) + "px";v.currentTime = percent * v.duration;
}progressWrap.addEventListener('click', function(e){videoSeek(e);
})v.addEventListener('timeupdate', function(){getProgress();
})

播放速度

playbackRate 屬性代表當前的播放速度。正常播放速度為 1。通過改變 playbackRate 的值，可以調整視頻的播放速度。

例如我們實現一個快進功能，使播放速度在正常/2倍/4倍間切換：

<button id="speed_up" type="button">快進</button>

var speedUpBtn = document.getElementById('speed_up');var _speed = 1;speedUpBtn.addEventListener('click', function(){changeSpeed();
});function changeSpeed () {_speed = _speed * 2;if(_speed>4){_speed = 1;}v.playbackRate = _speed;speedUpBtn.textContent = _speed===1?'快進':'快進x' + _speed;
}

有了快進功能，一般還要有一個快退的功能。在這里可以用之前提到過得 currentTime 來簡單實現。

<button id="back" type="button">快退</button>

var backBtn = document.getElementById('back');
var _back_speed = 1;
var _t;backBtn.addEventListener('click', function(){_back_speed = _back_speed * 2;if(_back_speed>4){v.playbackRate = 1;_back_speed = 1;clearInterval(_t);}else{v.playbackRate = 0;clearInterval(_t);//通過計時器來不斷改變當前播放位置，實現后退的功能_t = setInterval(function(){v.currentTime -= _back_speed * 0.1;},100)}backBtn.textContent = _back_speed===1?'快退':'快退x' + _back_speed;
})

加載狀態

通過事件 loadstart 和 loadeddata 可以監控資源的加載狀態。

當資源開始加載時，觸發 loadstart 事件。加載完畢時，觸發 loadeddata 事件。如果加載失敗，觸發 error 事件。

<p id="load_state"></p>

var loadState = document.getElementById('load_state');v.addEventListener('loadstart', function(){loadState.textContent = '視頻加載中。。。';
})v.addEventListener('loadeddata', function(){loadState.textContent = '加載完畢。';
})v.addEventListener('error', function(){loadState.textContent = '加載失敗。';
})

全屏

現在主流瀏覽器基本上實現了全屏效果，但是不同瀏覽器實現不一樣：

// Webkit (works in Safari5.1 and Chrome 15)
element.webkitRequestFullScreen();
document.webkitCancelFullScreen();

// Firefox 10+
element.mozRequestFullScreen();
document.mozCancelFullScreen();

// W3C 提議
element.requestFullscreen();
document.exitFullscreen();

實現全屏效果，只需要調用這些方法即可。

<button id="fullscreen" type="button">全屏</button>

function requestFullScreen(de) {if (de.requestFullscreen) {de.requestFullscreen();} else if (de.mozRequestFullScreen) {de.mozRequestFullScreen();} else if (de.webkitRequestFullScreen) {de.webkitRequestFullScreen();}
}var fullscreen = document.getElementById('fullscreen');fullscreen.addEventListener('click', function(){requestFullScreen(v);
})

至此基本上實現了一個簡單的播放器的操控組件，包括播放、暫停、時間顯示、音量調節、進度條、快進、快退、全屏等。我們的播放器張這樣：

哈哈，很粗糙，但是加上樣式的話會好很多吧~

除此之外， video 還提供了很多事件在上面的例子中并沒有用到，就列舉在下面，需要豐富功能時可以隨時查看~

完整代碼ChinTeo/html5videoDemo

轉載于:https://www.cnblogs.com/sunbeidan/p/7676644.html

總結

以上是生活随笔為你收集整理的使用html5进行视频播放的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

视频播放