html5 怎么点一个按钮,播放一个相应的视频

【方法步骤】：

首先下载video.js，百度一下就能找到；

这个是下载后的目录；

先把要用到的js\css.swf都加载到html页面上。如：

<link href="video-js/video-js.css" rel="stylesheet" type="text/css">

<script src="video-js/video.js"></script>

<script>

videojs.options.flash.swf = "video-js/video-js.swf"

</script>

加入下面的代码：

<video id="my_video_1" class="video-js vjs-default-skin" controls    preload="auto"width="640"height="480"poster="video-js/my_video_poster.png"    data-setup="{}">       <source src="Wildlife.mp4" type='video/mp4'>     </video>

只要记住：修改width="640" height="480"来改变视频显示大小，修改src="Wildlife.mp4"来改变要显示的视频；

然后打开html文件查看效果吧，它有暂停、音量控制、全屏等功能，还有好多其他功能，比如字幕等，这个以后再写。

【注意事项】：

如果是IE浏览器就将视频替换为传统的以FLASH形式播放；

解决IE不能播放的问题很简单。加入：<script>if (navigator.userAgent.indexOf('MSIE') >= 0){ document.getElementById("videoDiv").innerHTML='<embed src="Wildlife.mp4" autostart="true" loop="true" width="640" height="480" >'} </script>；

在信息量越来越大的今天，越来越多的网站重视数据信息的多样化与个性化，随着多媒体技术逐渐发展提高，在线展示视频、音频、PPT、图表等技术也越来越多地应用到了各行各业中，无论是企业还是个人，都在改变着自己的网站风格。

款很棒的

HTML5

视频播放器作为下一代的网页语言，HTML5

拥有很多让人期待已久的新特性，其中之一就是

video

标签，让开发者可以在网页中和添加图片一样简单的方式添加视频。1、VideoJSVideoJS

是最流行的

HTML5

视频播放器，免费、开源，可使用

CSS

轻松定制皮肤，支持全屏，在不支持的浏览器自动切e799bee5baa6e4b893e5b19e31333433623063换为

Flash

播放。2、SublimeVideoSublimeVideo

是一个独特的基于云概念的

HTML5

视频播放器，功能强大，可惜不是免费的。3、Open

Standard

Media

(OSM)

Player由

Alethia

Inc

开发，是集全功能于一体的网络播放器，非常不错。4、Video

for

EverybodyVideo

for

Everybody

让你在网页中嵌入一小段代码就能支持

HTML5

视频，在不支持的浏览器中自动切换为

Flash

播放。5、Kaltura

HTML5Kaltura

的

HTML5

视频解决方案

–

兼容所有主流浏览器，采用独特的

fallback

机制。6、FlareVideoFlareVideo

由

Alex

MacCaw

开发，他是一位Ruby/JS开发者，FlareVideo主要特色：在不支持

HTML5

视频的情况，用Flash作为替代方案可轻松自定义主题支持全屏完全开源和免费用于商业用途7、Projekktor全文

我们使用html5的video标签，可以不依赖于任何第三方的插件或控件，直接在浏览器中实现视频播放功能。

在了解了video标签之后，下面我们就使用html5的video标签来实现视频播放。

现在，我们打开浏览器，看一看具体的效果：

为了更好地兼容各种浏览器，你可以为一个video标签添加多个source子标签，每个source标签引用一个不同格式的视频文件。这样，html5浏览器会自动在这些source标签中从上到下依次寻找并识别出该浏览器可以播放的第一个视频文件并进行播放，从而实现兼容多个浏览器的视频播放功能。

注：html5的video标签目前只支持播放.mp4、.ogg、.webm等几种格式的视频文件，暂不支持其他格式的视频文件。此外，不同的html5浏览器支持的视频文件格式也略有不同，这种状况可能会在未来的html5中得以改善。

---