HTML5中視訊、音訊標籤使用
視訊video
<video
src=”視訊的路徑”
controls=”控制播放、暫停、音量等”
autoplay=”自動播放”
loop=”迴圈播放”
width=”視訊播放器的寬度”
height=”視訊播放器的高度”
>
</video>
還有做瀏覽器相容的方式：
<video controls autoplay loop width="500" height="500">
<source src="video/hhxd.mp4" type="video/mp4"></source>
<source src="video/ghsy.ogg" type="audio/ogg"></source>
flash支援
當所有不支援時，就提供一個下載路徑。
</video>
音訊audio
<audio
src=”音訊的路徑”
controls=”控制播放、暫停、音量等”
autoplay=”自動播放”
loop=”迴圈播放”
></audio>
相容類似視訊方式
視訊標籤使用程式碼案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>視訊|音訊</title>
</head>
<body>
<!--視訊標籤-->
<!--<video src="video/hhxd.mp4" controls autoplay loop="loop"></video>-->
<!--<video controls autoplay loop>
<source src="video/hhxd.mp4" type="audio/mp4"></source>
</video>-->
<!---->
<video controls autoplay loop width="500" height="500">
<source src="video/hhxd.mp4" type="video/mp4"></source>
<source src="video/ghsy.ogg" type="audio/ogg"></source>
</video>
<!--
<video width="800" height="" controls autoplay loop>
<source src="video/hhxd.mp4" type="video/mp4"></source>
<source src="myvideo.ogv" type="video/ogg"></source>
<source src="myvideo.webm" type="video/webm"></source>
<object width="" height="" type="application/x-shockwave-flash" data="myvideo.swf">
<param name="movie" value="myvideo.swf" />
<param name="flashvars" value="autostart=true&file=myvideo.swf" />
</object>
當前瀏覽器不支援 video直接播放，點選這裡下載視訊： <a href="myvideo.webm">下載視訊</a>
</video>
-->
</body>
</html>
音訊標籤使用案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>音訊</title>
</head>
<body>
<!--音訊標籤-->
<!--<audio src="audio/ghsy.mp3" controls autoplay loop="loop"></audio>-->
<audio controls autoplay loop="loop">
<source src="audio/ghsy.mp3" type="audio/mp3"></source>
當前瀏覽器不支援 audio直接播放，點選這裡下載視訊： <a href="audio/ghsy.mp3">下載音樂</a>
</audio>
</body>
</html>