HTML5的多媒体功能之一:video
1.HTML5页面中如何嵌入视频?
使用<video>
标签。
2.如何检测当前浏览器是否支持<video>
标签?
function checkVideo() { if (!!document.createElement('video').canPlayType) { //canPlayType() 方法浏览器是否能播放指定的音频/视频类型。 var vidTest = document.createElement("video"); oggTest = vidTest.canPlayType('video/ogg; codecs="tdeora, vorbis"'); if (!oggTest) { h264Test = vidTest.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"'); if (!h264Test) { document.getElementById("checkVideoResult").innerHTML = "Sorry. No video support." } else { if (h264Test == "probably") { //probably:浏览器最可能支持该音频/视频类型 document.getElementById("checkVideoResult").innerHTML = "Yes! Full support!"; } else { document.getElementById("checkVideoResult").innerHTML = "Well. Some support."; } } } else { if (oggTest == "probably") { document.getElementById("checkVideoResult").innerHTML = "Yes! Full support!"; } else { document.getElementById("checkVideoResult").innerHTML = "Well. Some support."; } } } else { document.getElementById("checkVideoResult").innerHTML = "Sorry. No video support." } }
理解上述代码需要的知识:
HTML 5 Audio/Video DOM canPlayType() 方法
3.如何使用<video>
标签?
两种方法:
第一种:<video>
标签带src属性:
<video src="movie.ogg" widtd="320" height="240" controls="controls"> Your browser does not support tde video tag. </video>
第二种:<video>
标签不带src属性,嵌套<source>
标签:
<video widtd="320" height="240" controls="controls"> <source src="movie.ogg" type="video/ogg"> <source src="movie.mp4" type="video/mp4"> Your browser does not support tde video tag. </video>
4.<video>
标签比较重要的属性
属性 | 值 | 描述 |
autoplay | autoplay | 如果出现该属性,则视频在就绪后马上播放。 |
controls | controls | 如果出现该属性,则向用户显示控件,比如播放按钮。 |
height | pixels | 设置视频播放器的高度。 |
loop | loop | 如果出现该属性,则当媒介文件完成播放后再次开始播放。 |
preload | auto/meta/none |
如果出现该属性,则视频在页面加载时进行加载,并预备播放。 如果使用 "autoplay",则忽略该属性。 |
src | url | 要播放的视频的 URL。 |
width | pixels | 设置视频播放器的宽度。 |
5.video的DOM接口
HTMLVideoElement
HTMLVideoElement的继承链:
HTMLVideoElement的五个属性:
-
HTMLVideoElement.height
-
HTMLVideoElement.videoHeight(只读)
-
HTMLVideoElement.width
-
HTMLVideoElement.videoWidth(只读)
-
HTMLVideoElement.poster (Is a DOMString that reflects the poster HTML attribute, which specifies an image to show while no video data is available.)
参考资料:
相关推荐
单元一 HTML5基础知识端基础前WebHTML5多媒体标签1常用多媒体格式2播放音频audio播放视频video34其他多媒体标签1常用多媒体格式音频格式1、WAV 微软和IBM共同开发的PC标准声音格式,文件后缀名.wav。2、MP3 MP3是一...
html5开发
使用Google地图获取位置信息多媒体是互联网中的最重要的一部分,无论访问的是哪种类型的网页,视频或音频触手可及,在之前实现这些功能对开发人员来说可能非常痛苦,必须依赖Object标签,调用第三方软件来加载,如...
画布canvas如何与视频video标签结合,达到制作各种视频功能的效果呢?其秘诀在于通过画布重新描绘一次视频的内容,将视频的每个画面都转换成画布的图像,这样就可以通过javascript语言所提供的图像控制方法来操控...
本文为大家分享了最常见的10个HTML5面试题,希望大家喜欢。 问题1、新的 HTML5 文档类型和字符集是? 答:HTML5 文档类型很简单: HTML5 使用...答:HTML5 对于多媒体提供了强有力的支持,除了 audio 和 video 标签外
运用HTML5的video和audio标签可以在页面中嵌入视频或音频文件,如果想要这些文件在页面中加载播放,还需要设置正确的多媒体格式。 视频音频嵌入技术概述 很多浏览器已经实现了对HTML5中video和audio元素的支持 ...
HTML 视频(Video) 在 HTML 中播放视频的方法有很多种。 HTML视频(Videos)播放 ...标签的作用是在 HTML 页面中嵌入多媒体元素。 下面的 HTML 代码显示嵌入网页的 Flash 视频: 实例 问题 HT
标签的作用是在 HTML页面中嵌入多媒体元素 <embed src="1.swf"width="400"> <object> 标签的作用是在 HTML页面中嵌入多媒体元素 <object data="1.swf"width="400"></object> 存在的问题: ...
HTML5 特性,包括原生音频和视频支持而无需 Flash。 HTML5 <audio> 和 <video> 标签让我们给站点添加媒体变得简单。我们只需要设置 src 属性来识别媒体资源,包含 controls 属性让用户可以播放和暂停...
为了更好地处理今天的互联网应用,HTML5添加了很多新元素及功能,比如: 图形的绘制,多媒体内容,更好的页面结构,更好的形式 处理,和几个api拖放元素,定位,包括网页 应用程序缓存,存储,网络工作者,等。 ...
为了更好的处理现在的互联网应用,HTML5新增了图形绘制、多媒体播放、页面结构、应用程序存储、网络工作等新元素。 图形绘制新元素 标签 描述 标签定义图形,比如图表和其他图像。该标签基于 JavaScript 的...
如同系统BIOS的快取功能,启用影像BIOS的快取功能将允许存取影像BIOS自C0000H到C7FFFH具有快取功能,如果快取控制器也被启用。高速缓存的大小愈大,影像效能将会更快速。 Memory Hole At 15M-16M(扩展卡内存分配...