搜尋
首頁web前端H5教程HTML5無外掛多媒體Media-音訊audio與視訊video的詳細介紹

音訊與視訊現在已經變得越來越流行
各個網站為了保證跨瀏覽器的兼容性
仍然選擇使用flash


(源碼截自優酷)

多媒體標籤

使用

HTML5增加了audio與video兩個多媒體標籤
相容性還不錯,低版本IE不支援
可以使我們不需要使用任何瀏覽器外掛程式就能夠插入音訊與視訊控制
而且非常的簡單


#(原始碼截自Bilibili)

元素用法如下:

<audio src="media/xi-Halcyon.mp3" id="demoAudio">不支持H5-audio</audio>
<video src="media/Animation.mp4" id="demoVideo">不支持H5-video</video>

標籤中內容如果瀏覽器不支援該標籤就會顯示
當然使用這兩個元素的時候
最起碼要新增src屬性,屬性值就是資源的url

但是每個瀏覽器由於版權問題支持的媒體格式也不同
所以就可以使用下面的方式

<audio id="demoAudio">
    <source src="media/xi-Halcyon.mp3">
    <source src="media/xi-Halcyon.ogg">    ...
    不支持H5-audio
</audio>

<video id="demoVideo">
    <source src="media/Animation.mp4">
    <source src="media/Animation.webm">    ...
    不支持H5-video
</video>

這樣指定不同的資源格式
也保證了各個瀏覽器的兼容性

屬性

#audio和video標籤除了src外
還有一些公有的屬性

屬性 描述
#autoplay #設定此屬性後,音/影片資源就緒後立即播放
controls 設定此屬性後,則顯示瀏覽器播放控制控制項
loop 設定此屬性後,則音/影片結束後重新循環開始播放
preload 設定此屬性後,則音/影片在頁面載入時進行加載,並預備播放(使用autoplay會忽略該屬性)


前三个属性属性名与属性值相同,直接添加属性名即可
preload有如下属性值

  • none 不加载数据

  • metedata 仅加载元数据(时长、比特率、帧大小等)

  • auto 浏览器加载它认为适量的媒体内容

比如想要在浏览器添加一段音乐
并且加载后立即播放,循环播放
使用浏览器的播放控件

<audio src="media/xi-Halcyon.mp3" id="demoVideo" autoplay controls loop></audio>

控件的样式各个浏览器都不一样
随着浏览器版本的更新,可能还会更新样式


video元素还有独有的属性poster
属性值是图片资源的url
用来设置视频播放前的一张占位图片

<video src="media/Animation.mp4" id="demoVideo" width="500" height="400" poster="images/preimg.jpg" controls></video>


点击播放后,视频正常播放

脚本化音视频

元素

使用js获取dom节点就很简单了

var a = document.getElementById(&#39;demoAudio&#39;);var v = document.getElementById(&#39;demoVideo&#39;);

类似于image的Image构造函数
Audio也可以通过类似的方式创建(Video不可以)
区别在于Image创建的图片是要插入文档的
但是Audio不需要

var a = new Audio(&#39;song.mp3&#39;);

然后可以为它添加autoplay、loop等属性
然后添加到页面

接口

在获取的DOM节点上可以使用浏览器提供的接口属性和方法
常用的属性、方法如下

  • currentSrc 媒体数据的URL地址

  • volume 播放音量

    • 介于0~1(注意超范围会报错),默认1最大音量

  • muted 是否静音

    • 设置true进入静音模式

  • playbackRate 媒体播放速度

    • 默认1.0常速,>1快进,

  • defaultPlaybackRate 媒体默认的播放速度

  • currentTime 当前播放时间(单位s)

  • duration 媒体时长(单位s)

  • play() 播放音/视频

  • pause() 暂停音/视频

  • load() 重新加载音/视频(通常用于修改元素属性后)


除此之外还有

  • played 已经播放的时间段

  • buffered 已经缓冲的时间段

  • seekable 用户可以跳转的时间段

它们都是TimeRanges对象
每个对象都有一个length属性(表示当前时间段)
以及start()和end()方法(返回当前时间段的起始时间点和结束时间点,单位s)
start()和end()都有一个数字参数,表示第一个时间段
确定当前缓存内容百分比:

var percentLoaded = Math.floor(song.buffered.end(0)/song.duration*100)

下面三个布尔属性表示媒体播放器的状态

  • paused 是否暂停

  • seeking 是否正调到一个新的播放点

  • ended 是否播放结束并停止


并不是所有浏览器都支持video和audio的所有编解码器
canPlayType()方法就是用来鉴定时候支持某一格式的媒体资源
返回字符串maybe、probably或空字符串
如果只传入MIME类型,则返回maybe
如果同时传入MIME类型和编解码器,则返回probably(可能性增加了)
只是因为媒体文件只不过是音/视频的容器
真正决定文件能否播放的还得是编码格式

console.log(a.canPlayType(&#39;audio/mp4&#39;)); 
//maybeconsole.log(a.canPlayType(&#39;audio/mp4;codecs="mp4a.40.2"&#39;)); 
//probably

下面的状态位属性也了解一下

  • readyState 就绪状态

    • 0 = HAVE_NOTHING - 没有关于音/视频是否就绪的信息

    • 1 = HAVE_METADATA - 关于音频/视频就绪的元数据

    • 2 = HAVE_CURRENT_DATA - 关于当前播放位置的数据是可用的,但没有足够的数据来播放下一帧/ms

    • 3 = HAVE_FUTURE_DATA - 当前及至少下一帧的数据可用

    • 4 = HAVE_ENOUGH_DATA - 可用数据足以开始播放

  • netWorkState 网络状态

    • 0 = NETWORK_EMPTY - 音/视频尚未初始化

    • 1 = NETWORK_IDLE - 音/视频是活动的且已选取资源,但并未使用网络

    • 2 = NETWORK_LOADING - 浏览器正在下载数据

    • 3 = NETWORK_NO_SOURCE - 未找到音/视频来源

  • error.code 错误状态

    • 1 = MEDIA_ERR_ABORTED - 取回过程被用户中止

    • 2 = MEDIA_ERR_NETWORK - 当下载时发生错误

    • 3 = MEDIA_ERR_DECODE - 当解码时发生错误

    • 4 = MEDIA_ERR_SRC_NOT_SUPPORTED - 不支持音频/视频

事件

除了接口属性方法以外
还有必不可少的事件模型
如果我们不想使用浏览器的控件而是定义自己的播放控制组件
就要使用这套事件了

  • play 播放时触发

  • pause 暂停时触发

  • loadedmetadata 浏览器获取完媒体元数据时触发

  • loadeddata 浏览器加载完当前帧媒体数据时触发

  • ended 播放结束后停止时触发

初次之外还有很多事件
很多不常用
在w3c截了一张图


通过接口与事件
也可以简单的实现自己简陋的音乐播放器

<button id="btn">播放</button><span id="cur">0s</span>/<span id="dur">0s</span><br>音量:<input type="range" id="vol">
var audio = new Audio(&#39;media/xi-Halcyon.mp3&#39;);
var btn = document.getElementById(&#39;btn&#39;);
var vol = document.getElementById(&#39;vol&#39;);
var cur = document.getElementById(&#39;cur&#39;);
var dur = document.getElementById(&#39;dur&#39;);var state = &#39;pause&#39;;

vol.value = 100;
audio.onloadeddata = function(){
  dur.textContent = Math.floor(audio.duration) + &#39;s&#39;;
}

setInterval(function(){
  cur.textContent = Math.floor(audio.currentTime) + &#39;s&#39;;
}, 200);

btn.onclick = function(){
  if(state === &#39;play&#39;){
    state = &#39;pause&#39;;
    btn.textContent = &#39;播放&#39;;
    audio.pause();
  }else{
    state = &#39;play&#39;;
    btn.textContent = &#39;暂停&#39;;
    audio.play();
  }
}


vol.oninput = function(){
  audio.volume = vol.value/100;
}

以上是HTML5無外掛多媒體Media-音訊audio與視訊video的詳細介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
H5:網絡內容和設計的未來H5:網絡內容和設計的未來May 01, 2025 am 12:12 AM

H5(HTML5)將通過新元素和API提升網頁內容和設計。 1)H5增強了語義化標記和多媒體支持。 2)它引入了Canvas和SVG,豐富了網頁設計。 3)H5的工作原理是通過新標籤和API擴展HTML功能。 4)基本用法包括使用創建圖形,高級用法涉及WebStorageAPI。 5)開發者需注意瀏覽器兼容性和性能優化。

H5:網絡開發的新功能和功能H5:網絡開發的新功能和功能Apr 29, 2025 am 12:07 AM

H5帶來了多項新功能和能力,極大提升了網頁的互動性和開發效率。 1.語義化標籤如、增強了SEO。 2.多媒體支持通過和標籤簡化了音視頻播放。 3.Canvas繪圖提供了動態圖形繪製工具。 4.本地存儲通過localStorage和sessionStorage簡化了數據存儲。 5.地理位置API便於開發基於位置的服務。

H5:HTML5的關鍵改進H5:HTML5的關鍵改進Apr 28, 2025 am 12:26 AM

HTML5帶來了五個關鍵改進:1.語義化標籤提升了代碼清晰度和SEO效果;2.多媒體支持簡化了視頻和音頻嵌入;3.表單增強簡化了驗證;4.離線與本地存儲提高了用戶體驗;5.畫布與圖形功能增強了網頁的可視化效果。

HTML5:標準及其對Web開發的影響HTML5:標準及其對Web開發的影響Apr 27, 2025 am 12:12 AM

HTML5的核心特性包括語義化標籤、多媒體支持、離線存儲與本地存儲、表單增強。 1.語義化標籤如、等,提升代碼可讀性和SEO效果。 2.和標籤簡化多媒體嵌入。 3.離線存儲和本地存儲如ApplicationCache和LocalStorage,支持無網絡運行和數據存儲。 4.表單增強引入新輸入類型和驗證屬性,簡化處理和驗證。

H5代碼示例:實際應用和教程H5代碼示例:實際應用和教程Apr 25, 2025 am 12:10 AM

H5提供了多種新特性和功能,極大地增強了前端開發的能力。 1.多媒體支持:通過和元素嵌入媒體,無需插件。 2.畫布(Canvas):使用元素動態渲染2D圖形和動畫。 3.本地存儲:通過localStorage和sessionStorage實現數據持久化存儲,提升用戶體驗。

H5和HTML5之間的連接:相似性和差異H5和HTML5之間的連接:相似性和差異Apr 24, 2025 am 12:01 AM

H5和HTML5是不同的概念:HTML5是HTML的一個版本,包含新元素和API;H5是基於HTML5的移動應用開發框架。 HTML5通過瀏覽器解析和渲染代碼,H5應用則需要容器運行並通過JavaScript與原生代碼交互。

H5代碼的基礎:密鑰元素及其目的H5代碼的基礎:密鑰元素及其目的Apr 23, 2025 am 12:09 AM

HTML5的關鍵元素包括、、、、、等,用於構建現代網頁。 1.定義頭部內容,2.用於導航鏈接,3.表示獨立文章內容,4.組織頁面內容,5.展示側邊欄內容,6.定義頁腳,這些元素增強了網頁的結構和功能性。

HTML5和H5:了解常見用法HTML5和H5:了解常見用法Apr 22, 2025 am 12:01 AM

HTML5和H5沒有區別,H5是HTML5的簡稱。 1.HTML5是HTML的第五個版本,增強了網頁的多媒體和交互功能。 2.H5常用於指代基於HTML5的移動網頁或應用,適用於各種移動設備。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

MantisBT

MantisBT

Mantis是一個易於部署的基於Web的缺陷追蹤工具,用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。

mPDF

mPDF

mPDF是一個PHP庫,可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件,並處理不同的語言。與原始腳本如HTML2FPDF相比,它的速度較慢,並且在使用Unicode字體時產生的檔案較大,但支援CSS樣式等,並進行了大量增強。支援幾乎所有語言,包括RTL(阿拉伯語和希伯來語)和CJK(中日韓)。支援嵌套的區塊級元素(如P、DIV),

WebStorm Mac版

WebStorm Mac版

好用的JavaScript開發工具

VSCode Windows 64位元 下載

VSCode Windows 64位元 下載

微軟推出的免費、功能強大的一款IDE編輯器