html如何加视频教程

"朱哥，现在视频站好火啊！那些视频是怎么放到网页上进行播放的呢？一定很麻烦吧！"

老朱：“不麻烦，html5标准下，一个video标签就搞定了。”

小白：“一个标签就可以实现视频播放么？”

老朱：“是啊！只要是支持HTML5的浏览器就可以，现在新浏览器都支持HTML5的，特别是手机上的浏览器妥妥的支持HTML5标准。”

小白：“那是怎么实现的呢？能给我详细说一下么？我已经迫不及待的要学这个功能了。”

“你先找个mp4格式的视频吧！有了视频就可以学习通过javascript对视频进行控制了！”

“我这里最不缺的就是视频了，平时玩炉石的时候自动录了很多视频，全都是mp4格式的。”

老朱：“那就好办了！你创建一个html页面，然后创建一个同级目录用来放视频！放好以后咱看看怎么用javascript操控视频。”

过了大约10分钟的时间，小白高兴的说道：“准备工作已经做好了，我建了一个video的同级文件夹，里面放了一个名叫video的视频，我们可以开始了么？”

老朱稍微顿了一下，思绪一下子回到了几年前，说道：“当时的flash多火啊，什么都能干，流媒体方面更是强到无敌了，可惜以后慢慢的就要被取代了。不过这不就是科技发展的自然规律么！顺势而行才有出路，flash太依赖插件了。”

小白说：“为啥这些浏览器厂商不直接把flash集成到浏览器核心功能里面呢？”

“唉～这就不知道啦！咱不讨论这些了，直接切入正题吧！HTML5嵌入视频需要使用video标签，它支持三种格式：Ogg、MPEG 4、WebM，不同浏览器对视频格式的支持不一样，你有时间可以看一下浏览器对视频格式的支持，这里我们就用mpeg4做为视频源。你看一下标签的最基本格式。”

小白看了一下嵌入的效果说道：“哇果然有视频了，可是视频在页面里面怎么这么大？”

老朱说道：“因为你的视频默认大小长宽特别大啊！video说白了也是一个容器，他是放视频的容器，明白这一点后你就知道通过css可以更改它的宽度高度等css样式了。现在我们通过css改一下它的宽和高。”

“在video里面添加一个id属性，然后css设置一下高和宽就可以了。另外controls属性是用来给视频添加播放控件的。你可以看到视频的下方有播放按钮、进度条、声音、全屏、下载这几个控件。添加controls属性以后，播放控件自动跟视频进行结合，如没特殊需求我们嵌入视频的功能就完成了。”

小白激动的说道：“这也太简单了吧！看来是我想多了。”

“小白！如果仅仅为了在页面播放一个视频确实不复杂，但是有一点你必须清楚，客户的需求是天马行空的，有些客户可不仅仅想要这么简单的功能。就算没有客户提需求你也得考虑这几个问题：用户使用不同浏览器我的视频是不是都支持、视频由于网络问题无法加载怎么办？视频是在打开网页后播放还是用户触发一个播放事件后播放等等问题，我们还需要对用户体验进行考虑，所以看似简单的视频插入其实并不简单。你先自己把html5的video标签相关的属性和事件了解一下，一会我们再通过javascript对视频进行一些简单操作。”

“哦！对了，小白，思考这样一个问题，通过css能不能让视频自适应屏幕宽度。”

想学H5的朋友可以关注老炉，您的关注是我持续更新《小白HTML5成长之路》的动力！