做网站专家,怎么做qq钓鱼网站吗,wordpress在php下安装教程视频,担路网络科技有限公司的证书掌握HTML5中的多媒体--视频(video) 除非你一直生活在一个偏远的岛屿上,过去一年左右的时间,你应该已经听说过HTML5的各式炒作。HTML5将重塑富Web应用的未来。 下面 Figure 1的示例展示了HTML5中video标签与传统的object标签的不同. Figure 1 1. section 2. h… 掌握HTML5中的多媒体--视频(video) 除非你一直生活在一个偏远的岛屿上,过去一年左右的时间,你应该已经听说过HTML5的各式炒作。HTML5将重塑富Web应用的未来。 下面 Figure 1的示例展示了HTML5中video标签与传统的object标签的不同. Figure 1 1. section 2. h1使用HTML5的video标签播放视频/h1 3. videosrcvideo1.mp4 4. /video 5. /section 6. section 7. h1使用Flash插件播放视频/h1 8. objecttypeapplication/x-shockwave-flash 9. dataplayer.swfwidth290height24 10. paramnamemovievalueplayer.swf 11. /object 12./section 那么重要的是什么呢? 这两个示例很简单,也易于实现。因为视频标记是一个用来播放媒体的标准, 你不必猜测浏览器是否要安装特定的某个版本插件。这个标准正是HTML之前最为缺少的那部分。 HTML5支持的媒体格式 HTML5支持AAC, MP3 和 Ogg Vorbis三种音频格式以及Ogg Theora, WebM 和MPEG-4三种视频格式. 但并不是所有浏览器都支持所有的格式。如下表 Figure 2浏览器支持的媒体格式 浏览器 视频格式 音频格式 Ogg Theora H.264 VP8 (WebM) Ogg Vorbis MP3 Wav Internet Explorer 手动安装 9.0 手动安装 No Yes No Mozilla Firefox 3.5 No 4.0 Yes No Yes Google Chrome 3.0 No 6.0 Yes Yes Yes Safari 手动安装 3 手动安装 No Yes Yes Opera 10.50 No 10.60 Yes No Yes 使用视频标签video 在HTML5中播放视频直接使用video标签就可以了, 如下所示: 1. videosrcvideo.mp4controls/ src属性 (http://www.w3.org/TR/html5/video.html#the-source-element) 设备要播放视频的名称(可以多个), control的布尔值用来调整是否显示播放控制栏. 完整的属性列表如下所示: Figure 3视频相关的属怀 属性 值 描述 Muted Muted 定义的音频的初始状态.目前仅支持muted. Crossorigin 定义当前视频是否是一个跨域的项目. Mediagroup ID 将多个视频或音频集合在一起并结合MediaController实现同步控制. Autoplay Autoplay 如果指定视频会在准备好(如已取得可播放视频)后自动播放. Controls Controls 添加播放控制及音量控制功能栏. Height Pixels 指定播放器的高度以pixel为单位. Loop Loop 如果指定视频将重复播放. Poster url 指定视频的预览图. Preload Preload 如果指定视频会在加页面加载过程中被加载。当Autoplay被指定时会被忽略。 Src url 目标视频的URL. Width Pixels 指定播放器的宽度以pixel为单位. 下面是一使用了多个属性的示例也包括一个备用(fallback)的错误信息(当浏览器不支持video标签时显示). 1. videosrcvideo.mp4width320height240autoplaycontrolsloop 2. Your browser does not support the video tag. 3. /video 你也可以使用MIME指定视频的编码格式如下 1. !-- H.264 Constrained baseline profile video (main and extended video compatible) 2. level 3 and Low-Complexity AAC audio in MP4 container -- 3. source srcvideo.mp4 typevideo/mp4; codecsavc1.42E01E, mp4a.40.2 4. !-- H.264 Extended profile video (baseline-compatible) level3 and Low-Complexity 5. AAC audioin MP4 container -- 6. source srcvideo.mp4 typevideo/mp4; codecsavc1.58A01E, mp4a.40.2 你也可使用JavaScript来设定这些属性. 如下面的代码示例: !—显示控制栏的三种方式-- videocontrols videocontrols videocontrolscontrols // JavaScript中显示控制栏的两种方式 video.controls true; video.setAttribute (controls, controls); 如果无法确定目标浏览器是否能支持video或者你的视频格式你最好指定一个回退的信息以告诉用户为什么没有到期望的内容。如下所示 1. videocontrols 2. sourcesrcvideo1.mp4/ 3. sourcesrcvideo1.ogv/ 4. sourcesrcvideo1.webm/ 5. pThis browser does not support HTML5 video/p 6. /video 如果你要确保视频可以被播放你可以按照以前的方式加入一个flash的object标签,如下 1. videocontrols 2. sourcesrcvideo1.mp4/ 3. sourcesrcvideo1.ogv/ 4. sourcesrcvideo1.webm/ 5. objectdatavideoplayer.swf 6. paramnameflashvarsvaluevideo1.mp4 7. 您的浏览器对HTML5 Video 和 Flash 都不支持 8. /object 9. /video 也可以在JavaScript中使用canPlayType来检测浏览器是否可以播放某个格式的视频 1. var video document.getElementsByTagName(video)[0]; 2. if (video.canPlayType) 3. { //支持video标签 4. if (video.canPlayType(video/ogg; codecstheora, vorbis)) 5. { // it may be able to play } 6. else 7. {// the codecs or container are not supported 8. fallback(video); 9. } 10. } 如果希望有更明确清晰的提示可以使用onerror事件监听器来报告一个错误 1. video srcvideo.mp4 2. οnerrοrfallback(this) 3. 不支持video 4. /video 使用poster,你可以在video播放区域显示一张图片来替代它可以用来显示视频的预览图。下面是一个示例: 1. video srcvideo1.mp4 posterpreview.jpg/video 最后使用JavaScript和HTML,你就可以创建一个交互性的视频播放器。Figure 4 展示如何使用JavaScript添加一个video并响应用户的控制操作.(译注:比如Youtue就是采用动态创建video控件的方式来提供视频播放功能的。) Figure 4 JavaScript对视频的控制 1. var video document.createElement(video); 2. video.src video1.mp4; 3. video.controls true; 4. document.body.appendChild(video); 5. var video new Video(); 6. video.src video1.mp4; 7. var video new Video(video1.mp4) 8. script 9. var video document.getElementsByTagName(video)[0]; 10. /script 11. inputtypebuttonvaluePlayonclickvideo.play() 12. inputtypebuttonvaluePauseonclickvideo.pause() 完整的事件和特性列表参考http://www.w3.org/TR/html5/video.html#playing-the-media-resource. 译注: 作者的代码可能会让你有些疑问。看的时候要注意分辨作者可能是使用多种方式来实现同一个功能。以最后一个代码为例其中5~7行是1~2行的另两种写法。 以下是一份动态加入video元件并可以控制静音的功能示例: *muteVideo是静音状态切换函数 *playVideo函数在没有video控件时会添加一个控件如果已经存在就播放。 [javascript] view plaincopyprint? function addSourceToVideo(element,src,type) { var source document.createElement(source); source.src src; source.type type; element.appendChild(source); } function insertVideo(src,type,width,height) { var vid document.createElement(video); vid.controlscontrols; vid.width width; vid.heightheight; vid.id video_control; vid.muted false; addSourceToVideo(vid,src,type); document.getElementById(show).appendChild(vid); } function muteVideo() { var vid document.getElementById(video_control); if(vid undefined) return; if (vid.mutedundefined || !vid.muted) { vid.muted true; } else { vid.muted false; } } function playVideo() { var video document.getElementById(video_control); if(videoundefined) { insertVideo(files/happyfit2.mp4,video/mp4,604,256); video document.getElementById(video_control); } video.play(); } function addSourceToVideo(element,src,type)
{var source document.createElement(source);source.src src;source.type type;element.appendChild(source);
}function insertVideo(src,type,width,height)
{var vid document.createElement(video);vid.controlscontrols;vid.width width;vid.heightheight;vid.id video_control;vid.muted false;addSourceToVideo(vid,src,type);document.getElementById(show).appendChild(vid);
}function muteVideo()
{var vid document.getElementById(video_control);if(vid undefined)return;if (vid.mutedundefined || !vid.muted){vid.muted true;}else{vid.muted false;}
}function playVideo()
{var video document.getElementById(video_control);if(videoundefined){insertVideo(files/happyfit2.mp4,video/mp4,604,256);video document.getElementById(video_control);}video.play();
} 原文地址:Working with Media in HTML5 转载于:https://www.cnblogs.com/webzhangnan/archive/2012/10/06/2713379.html
