好友团

24小时服务电话

134-2860-6060

查看: 571|回复: 0

[综合教程] 向HTML中插入视频并兼容所有浏览器的方法

[复制链接]
发表于 2017-4-19 22:37:05 | 显示全部楼层 |阅读模式
填写您的邮件地址,订阅我们的精彩内容:
[受理编号:SL-2422]
填写您的邮件地址,订阅我们的精彩内容:
使用HTML5在网页中嵌入音频和视频播放的基本方法
HTML5 特性,包括原生音频和视频支持而无需 Flash。
HTML5 <audio> 和 <video> 标签让我们给站点添加媒体变得简单。我们只需要设置 src 属性来识别媒体资源,包含 controls 属性让用户可以播放和暂停媒体。
嵌入视频
下面是在 Web 页面中嵌入视频文件最简单的形式:
  1. <video src="foo.mp4"  width="300" height="200" controls>  
  2.     Your browser does not support the <video> element.      
  3. </video>  
复制代码
目前的 HTML5 规范草案还没有指定浏览器应该在 video 标签中支持哪种视频格式。但是最常用的视频格式是:
Ogg:带有 Thedora 视频编码器和 Vorbis 音频编码器的 Ogg 文件。
mpeg4:带有 H.264 视频编码器和 AAC 音频编码器的 MPEG4 文件。
我们可以使用带有媒体类型和其他属性的 <source> 标签指定媒体文件。video 元素允许使用多个 source 元素,浏览器会使用第一个认可的格式:
  1. <!DOCTYPE HTML>  
  2. <html>  
  3. <body>  
  4.    <video  width="300" height="200" controls autoplay>  
  5.        <source src="/html5/foo.ogg" type="video/ogg" />  
  6.        <source src="/html5/foo.mp4" type="video/mp4" />  
  7.        Your browser does not support the <video> element.   
  8.    </video>  
  9. </body>  
  10. </html>  
复制代码
Video 属性规范
HTML5 video 标签可以使用多个属性控制外观和感觉以及各种控制功能:
属性
描述
autoplay如果指定这个布尔值属性,只要没有停止加载数据,视频就会立刻开始自动播放。
autobuffer如果指定这个布尔值属性,即使没有设置自动播放,视频也会自动开始缓冲。
controls如果指定这个属性,就允许用户控制视频播放,包括音量控制,快进,暂停或者恢复播放。
height这个属性以 CSS 像素的形式指定视频显示区域的高度。
loop如果指定这个布尔值属性,表示允许播放结束后自动回放。
preload指定这个属性,视频会在载入页面时加载并准备就绪。如果指定自动播放则忽略。
poster这是一个图像 URL,显示到用户播放或快进。
src要嵌入的视频 URL。可选,可以在 video 块中使用 <source> 元素替代来指定要嵌入的视频。
width这个属性以 CSS 像素的形式指定视频显示区域的宽度。

嵌入音频
HTML5 支持的 <audio> 标签用于在如下所示的 HTML 或 XHTML 文档中嵌入语音内容。
  1. <audio src="foo.wav" controls autoplay>  
  2.     Your browser does not support the <audio> element.      
  3. </audio>  
复制代码
当前的 HTML 草案规范还没有指定浏览器应该在 audio 标签中支持哪种音频格式。但是最常用的音频格式是 ogg,mp3 和 wav。
我们可以使用带媒体类型以及其他属性的的 <source> 标签指定媒体。Audio 元素允许使用多个 source 元素,并且浏览器会使用第一个认可的格式:
  1. <!DOCTYPE HTML>  
  2. <html>  
  3. <body>  
  4.    <audio controls autoplay>  
  5.        <source src="/html5/audio.ogg" type="audio/ogg" />  
  6.        <source src="/html5/audio.wav" type="audio/wav" />  
  7.        Your browser does not support the <audio> element.   
  8.    </audio>  
  9. </body>  
  10. </html>  
复制代码
Audio 属性规范
HTML5 audio 标签可以使用多个属性来控制外观,感受以及各种控制功能:
属性
描述
autoplay如果指定这个布尔值属性,只要没停止加载数据,音频就会立刻自动开始播放。
autobuffer如果指定这个布尔值属性,即使没有设置自动播放,音频也会自动开始缓冲。
controls如果指定这个属性,表示允许用户控制音频播放,包括音量控制,快进以及暂停/恢复播放。
loop如果指定这个布尔值属性,表示允许音频播放结束后自动回放。
preload这个属性指定加载页面时加载音频并准备就绪。如果指定自动播放则忽略。
src要嵌入的音频 URL。可选,可以在音频块里面使用 <source> 元素指定要嵌入的音频来替代。

处理媒体事件
HTML5 audio 和 video 标签可以用多个属性利用 JavaScript 控制各种控制功能:
事件
描述
abort播放中止时生成这个事件。
canplay足够的数据可用并且媒体可以播放时生成这个事件。
ended播放完成时生成这个事件。
error发生错误时生成这个事件。
loadeddata媒体第一帧载入完成时生成这个事件。
loadstart开始加载媒体时生成这个事件。
pause播放暂停时生成这个事件。
play播放开始或者恢复时生成这个事件。
progress定期通知媒体下载进度时生成这个事件。
ratechange播放速度改变时生成这个事件。
seeked快进操作完成时生成这个事件。
seeking快进操作开始时生成这个事件。
suspend媒体加载被暂停时生成这个事件。
volumechange音频音量变化时生成这个事件。
waiting请求操作(比如播放)被延迟,等待另一个操作完成(比如快进)时生成这个事件。

下面是一个允许播放给定视频的示例:
  1. <!DOCTYPE HTML>  
  2. <head>  
  3. <script type="text/javascript">  
  4. function PlayVideo(){   
  5.    var v = document.getElementsByTagName("video")[0];     
  6.    v.play();   
  7. }   
  8. </script>  
  9. </head>  
  10. <html>  
  11. <body>  
  12.    <form>  
  13.    <video  width="300" height="200" src="/html5/foo.mp4">  
  14.        Your browser does not support the <video> element.   
  15.    </video>  
  16.    <input type="button" onclick="PlayVideo();"  value="Play"/>  
  17.    </form>  
  18. </body>  
  19. </html>  
复制代码
配置服务器媒体类型
大多数服务器默认都没使用正确的 MIME 类型提供 Ogg 或 mp4 媒体,因此我们可能需要添加适当的配置。
代码如下:
  1. AddType audio/ogg .oga
  2. AddType audio/wav .wav
  3. AddType video/ogg .ogv .ogg
  4. AddType video/mp4 .mp4
复制代码


回复
〖销售站〗一站式品质服务平台. 一体化商城系统.【www.xiaoshouzhan.com】
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

销售站-一体化商城系统!
 
 
Q Q|技术部
销售|销售部
客服|销售站实体店
分流|销售站实体店
视频解析群:
好记吧
产品售后群:
站长源码(交易平台)
域名拍卖群:
域名拍卖群
产品维权群:
藤县站
微信客服中心:
/images/niwota00000000300.jpg
工作时间:
8:00-18:00
 
版权所有:好友团

QQ|关于我们|手机版|( 桂ICP备19008987号|网站地图  | Sponsor: Friends group