Rumah hujung hadapan web Tutorial H5 html5视频与声频详解

html5视频与声频详解

Mar 19, 2017 pm 02:06 PM
php tutorial php Tutorial video

[导读] html5视频video与声频audio详解 在html5中出现了一些新特性:canvas 元素视频 video 和 声频audio 元素 ;对本地离线存储(localstorage,sessionstorage)的支持 ;新增特殊内容元素:article、footer

html5视频video与声频audio详解

     在html5中出现了一些新特性:

canvas 元素
视频 video 和 声频audio 元素 ;
对本地离线存储(localstorage,sessionstorage)的支持 ;
新增特殊内容元素:article、footer、header、nav、section ;
新增表单控件: calendar、date、time、email、url、search 。
    今天看看视频和声频:在html5中规定了视频的标准方法:video

<video src="xxx.ogg" controls="controls">你的浏览器还不支持哦</video>  我们也可以设置多个source,浏览器会为我们选择第一个可识别的视频来播放,形如:<video width="320" height="240" controls="controls">  <source src="xxx.ogg" type="video/ogg">  <source src="xx1.mp4" type="video/mp4">你的浏览器还不支持哦</video>video属性有:属性 值 描述
autoplay  autoplay 如果出现该属性,则视频在就绪后马上播放。
controls  controls 如果出现该属性,则向用户显示控件,比如播放按钮。
height 像素 设置视频播放器的高度。
loop  loop 如果出现该属性,则当媒介文件完成播放后再次开始播放。
preload preload 如果出现该属性,则视频在页面加载时进行加载,并预备播放。

如果使用 "autoplay",则忽略该属性。
 
src  url视频地址 要播放的视频的 url。
width  像素 设置视频播放器的宽度。
autobuffer
 autobuffer

(自动缓冲)
 在网页显示时,该二进制属性表示是由用户代理(浏览器)自动缓冲的内容,还是由用户使用相关api进行内容缓冲
 
poster
 url图片地址 

当视频未响应或缓冲不足时,该属性值链接到一个图像。该图像将以一定比例被显示出来
 

在html5 规定了声频标准为 audio 元素,audio 元素能够播放声音文件或者音频流。

audio格式和video相似:直接行多source:

<audio controls="controls">
  <source src="xx.ogg" type="audio/ogg">
  <source src="xx1.mp3" type="audio/mpeg">
你的浏览器还不支持哦
</audio>其属性比video少了height、width、poster。在我们的开发中多媒体越来越重要,html5出现了这些video和audio。

Atas ialah kandungan terperinci html5视频与声频详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Tag artikel panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Panduan Pemasangan dan Naik Taraf PHP 8.4 untuk Ubuntu dan Debian Panduan Pemasangan dan Naik Taraf PHP 8.4 untuk Ubuntu dan Debian Dec 24, 2024 pm 04:42 PM

Panduan Pemasangan dan Naik Taraf PHP 8.4 untuk Ubuntu dan Debian

Tarikh dan Masa CakePHP Tarikh dan Masa CakePHP Sep 10, 2024 pm 05:27 PM

Tarikh dan Masa CakePHP

Muat naik Fail CakePHP Muat naik Fail CakePHP Sep 10, 2024 pm 05:27 PM

Muat naik Fail CakePHP

Konfigurasi Projek CakePHP Konfigurasi Projek CakePHP Sep 10, 2024 pm 05:25 PM

Konfigurasi Projek CakePHP

Penghalaan CakePHP Penghalaan CakePHP Sep 10, 2024 pm 05:25 PM

Penghalaan CakePHP

Bincangkan CakePHP Bincangkan CakePHP Sep 10, 2024 pm 05:28 PM

Bincangkan CakePHP

Panduan Ringkas CakePHP Panduan Ringkas CakePHP Sep 10, 2024 pm 05:27 PM

Panduan Ringkas CakePHP

Ringkasan Soalan Lazim untuk Penggunaan DeepSeek Ringkasan Soalan Lazim untuk Penggunaan DeepSeek Feb 19, 2025 pm 03:45 PM

Ringkasan Soalan Lazim untuk Penggunaan DeepSeek

See all articles