Captain9911

HTML音视频播放

  • Oct 11, 2022

关键词：html, 音视频, audio, video

音频播放

使用 object

<object width="300" height="100" data="./media/广东雨神 - 广东十年爱情故事.mp3"></object>

使用 embed

<embed width="300" height="100" src="./media/广东雨神 - 广东十年爱情故事.mp3"></embed>

使用 a

<a href="./media/广东雨神 - 广东十年爱情故事.mp3">播放一段音频</a>

使用 audio

<!-- autoplay：自动播放 -->
<!-- controls：显示播放器 -->
<!-- loop：正数时，指定循环次数，为-1则无限循环 -->
<audio src="./media/广东雨神 - 广东十年爱情故事.mp3" autoplay controls loop="2"></audio>

通常为了浏览器兼容，需要做三种音频的处理。

<audio autoplay controls loop="-1">
	<source src="./media/广东雨神 - 广东十年爱情故事.mp3">
	<source src="./media/广东雨神 - 广东十年爱情故事.ogg">
	<source src="./media/广东雨神 - 广东十年爱情故事.wav">
	您的浏览器不支持音频播放
</audio>

最好的html解决方法，当使用 audio 元素播放失败时，代码将会尝试使用 embed 来播放音频。

<audio autoplay controls loop="-1">
	<source src="./media/广东雨神 - 广东十年爱情故事.mp3">
	<source src="./media/广东雨神 - 广东十年爱情故事.ogg">
	<source src="./media/广东雨神 - 广东十年爱情故事.wav">
	<embed width="300" height="100" src="./media/广东雨神 - 广东十年爱情故事.mp3"></embed>
</audio>

视频播放

使用 object / embed / a

与播放音频相同。

使用 video

<!-- autoplay：自动播放 -->
<!-- controls：显示控制按钮 -->
<video width="320" height="240" controls="">
	<source src="./media/[陈奕迅]喜欢一个人_hd.mp4" type="video/mp4">
</video>

通常为了浏览器兼容，需要做两种视频的处理。

<video autoplay controls>
    <source src="./media/[陈奕迅]喜欢一个人_hd.mp4">
    <source src="./media/[陈奕迅]喜欢一个人_hd.ogg">
    您的浏览器不支持视频播放
</video>

最好的视频播放方法，video + object + embed。

<video width="320" height="240" controls="">
	<source src="./media/[陈奕迅]喜欢一个人_hd.mp4">
    	<source src="./media/[陈奕迅]喜欢一个人_hd.ogg">
	<object width="320" height="240" data="./media/[陈奕迅]喜欢一个人_hd.mp4">
		<embed width="320" height="240" src="./media/[陈奕迅]喜欢一个人_hd.mp4"></embed>
	</object>
</video>
Search