HTML-Audio/Video

時間 2019-11-20

標籤 html audio video 欄目 HTML 简体版

原文原文鏈接

簡介：javascript

容器：不管是音頻仍是視頻文件，實際上都是容器文件；
- 視頻文件包含了音頻軌道、視頻軌道和其餘一些元數據；
- 視頻文件播放時，音頻軌道和視頻軌道是綁定在一塊兒；元數據包含了該視頻的封面、子標題、字幕等信息；
主流視頻容器支持格式：
- Audio Video Interleave(.avi)
- Flash Video(.flv)
- MPGE4(.mp4)
- Mattroska(.mkv)
- Ogg(.ogv)
編/解碼器：
- 一組算法，用來對一段特定視頻或音頻進行解碼和編碼；
- 因爲一些緣由，當前沒有任意一種編解碼器能夠被全部瀏覽器廠商支持；
- 目前HTML5規範中並無對編解碼器作要求；

瀏覽器支持：html

<video src='../test.webm' controls>
    <object data='videoplayer.swf' type='application/x-shockwave-flash'>
	<param name="movie" value="video.swf">
   </object>
</video>

以插件方式播放視頻的代碼爲備選內容；不過考慮到各類瀏覽器，可能須要多種視頻格式；java

WebVTT文件： 一個WebVTT（.vtt）文件是一個簡單的純文本，裏面包含了幾種類型的視頻信息：web

字幕：關於對話的轉譯或者翻譯。
標題：相似於標題，可是還包括音響效果和其餘音頻信息。
說明：預期爲一個單獨的文本文件，經過屏幕閱讀器描述視頻。
章節：旨在幫助用戶瀏覽整個視頻。
元數據：默認不打算展現給觀衆的、和視頻有關的信息和內容。可是你可使用Javascript來訪問。

test.vtt
---------
1
00:00:01.000 --> 00:00:18.000
At the left we can see...


test.html
------------
<video src='../test.webm' controls>
    <track src="test.vtt" kind="subtitles" srclang="en" label="English" />  
</video>

理解媒體元素：算法

聲明媒體元素：audio/video ; controls //若是不指定controls,瀏覽器將沒法顯示通用的控件，可用在如背景音樂；
source元素：用於備用聲明包含來源
```
<audio controls>
    <source src = 'test.ogg'>
    <source src = 'test.mp3'>
</audio>
```
來源列表的順序，最好按照用戶由高到低或者服務器消耗由低到高；　　canvas
媒體的控制：
- autoplay:自動播放，在不設置controls的狀況下設置，如廣告。//注意不是每種設備都支持自動播放，IOS就不支持；
- 經常使用控制函數：load()、play()、pause()、canPlayType()；
- 只讀媒體特性：durationo、paused、ended、startTime、error......
- 可用腳本控制的特性值：autoplay、 loop、 muted...............

使用audio瀏覽器

設置背景音樂：

<body>
	<audio id='musci'>
	      <source src='test.ogg'>	
	      <source src='test.mp3'>	
	</audio>

	<button id='toggle'  onclick='toggleSound()'>Play</button>
</body>

<script type="text/javascript">
	function toggleSound() {
		var music = document.getElementById('musci');
		var toggle = document.getElementById('toggle');
		if(music.paused) {
			music.play();
			toggle.innerHTML = 'Pause';
		} else {
			music.pause();
			toggle.innerHTML = 'Play';
		}
	}
</script>

使用video服務器

額外特徵
- poster：視頻加載前的內容圖片url地址
- width/height:設置尺寸或讀取設置的尺寸；
- videoWidth/videoHeight:返回視頻固有寬高；只讀

建立一個視頻時序查看器：

<body>
	<video src='./test.webm' controls id='movies' autoplay oncanplay='startVideo()' onended='stopTimeline()'>
		<object data='videoplayer.swf' type='application/x-shockwave-flash'>
			<param name="movie" value="video.swf">
		</object>
	</video>

	<canvas id='timeline' width='400px' height='300px'>
		
	</canvas>
</body>

<script type="text/javascript">
//設置幀更新的間隔
	var updateInterval = 5000;

//時序中幀的尺寸	
	var frameWidth = 100;
	var frameHeight = 75;

//時序的總幀數
	var frameRows = 4;
	var frameColumns = 4;
	var frameGrid = frameRows * frameColumns;	

//當前幀
	var frameCount = 0;

//播放完後取消計時器
    var intervalId;
	var videoStarted = false;

	function startVideo() {
		//確保第一次播放才觸發
		if(videoStarted) {
			return
		}
		videoStarted = true;

		updateFrame();
		intervalId = setInterval(updateFrame, updateInterval);

		var timeline = document.getElementById('timeline');
		timeline.onclick = function(evt) {
			var video = document.getElementById('movies');
            //計算出第幾個，0開始計算
			var offX = evt.layerX;
			var offY = evt.layerY;
			var clickedFrame = Math.floor(offY / frameHeight) * frameRows;
			clickedFrame += Math.floor(offX / frameWidth) ;
            
			var totalTimes = Math.floor(frameCount / 16) * 16 + clickedFrame;
			if(clickedFrame > (frameCount % 16)) {
				totalTimes -= 16;
			}
			
			video.currentTime = totalTimes * updateInterval / 1000;
		}
	}

//把幀繪製到畫布上
	function updateFrame() {
		var video = document.getElementById('movies');
		var timeline = document.getElementById('timeline');
       
        var ctx = timeline.getContext('2d');
        //當前播放位置
        var framePosition = frameCount % frameGrid;
        var frameX = (framePosition % frameColumns) * frameWidth;
        var frameY = (Math.floor(framePosition / frameRows)) * frameHeight;
        //canvas的繪製程序能夠將視頻源看成圖像繪製
        ctx.drawImage(video, 0, 0, 400, 300, frameX, frameY, frameWidth, frameHeight);

        frameCount++;
	}
	function stopTimeline() {
		clearInterval(intervalId);
	}

</script>

獲取當前時間video.currentTime;
當前加載可播放事件：oncanplay;
當前播放結束事件：onended;

一些其餘設置例子：

<video src='./test.webm' controls id='movies' autoplay onmouseover='this.play()'onmouseout='this,pause()'>
       <object data='videoplayer.swf' type='application/x-shockwave-flash'>
	      <param name="movie" value="video.swf">
       </object>
</video>

更多相關文章...

相關標籤/搜索

HTML

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。