App下載

html5網(wǎng)頁(yè)中怎么加入視頻？怎么為網(wǎng)頁(yè)添加視頻？

猿友 2021-05-28 17:30:45 瀏覽數(shù) (13529)
反饋

相信很多小伙伴會(huì)在各種網(wǎng)頁(yè)和 app 中觀看各種視頻，那么今天我們就來(lái)說(shuō)說(shuō)怎么在html5網(wǎng)頁(yè)中怎么加入視頻？和怎么為網(wǎng)頁(yè)添加視頻吧！

1.首先，我們?cè)陂_(kāi)發(fā)工具中新建一個(gè) .html 文件，輸入下面代碼：

!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>怎么加入視頻</title>
	</head>
	<body>
		<div>
		</div>
	</body>
</html>

2.在代碼塊中加入<video>標(biāo)簽，在頭部設(shè)置視頻播放的寬高，代碼如下：

!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>怎么加入視頻</title>
		<style>
			video{
				width: 600px;
				height: 450px;
			}
		</style>
	</head>
	<body>
		<div>
			<video >
				
			</video>
		</div>
	</body>
</html>

3.接下來(lái)我們?cè)诖a塊的 video 標(biāo)簽中寫入 src 之后在填寫視頻文件路徑，在添加 controls 屬性，代碼如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>怎么加入視頻</title>
		<style>
			video{
				width: 600px;
				height: 450px;
			}
		</style>
	</head>
	<body>
		<div>
			<video src="img/video-set.mp4" controls="controls">
				
			</video>
		</div>
	</body>
</html>

4.這樣子我們就完成了一個(gè)視頻的加入效果，現(xiàn)在我們來(lái)看看結(jié)果吧！截圖如下：

視頻加入成功

這樣子我們?cè)陬A(yù)覽中點(diǎn)擊播放箭頭就可以實(shí)現(xiàn)一個(gè)播放了。那么今天這個(gè)有關(guān)于“怎么在 html5 網(wǎng)頁(yè)中怎么加入視頻？怎么為網(wǎng)頁(yè)添加視頻？“的問(wèn)題就解決了，這個(gè)是一個(gè)最簡(jiǎn)單的添加視頻的方法，我們?cè)趯?shí)戰(zhàn)過(guò)程中要注意視頻的播放和視頻的一個(gè)兼容性，有關(guān)系html 中視頻兼容的問(wèn)題，我們可以在html音頻中進(jìn)行一個(gè)了解。其他有關(guān)于 html 的學(xué)習(xí)也可以在HTML 教程中進(jìn)行學(xué)習(xí)。

HTML CSS JavaScript 編程基礎(chǔ)

0 人點(diǎn)贊