html中video视频播放

1. ——video——

video元素
局部属性	autoplay，preload，controls，loop，poster，width，height，muted，src

1.1 preload预先加载视频

preload="auto"  默认请求

preload="metadata" 用户开始播放之前只能载入视频的元数据

preload="none"播放之前不会载入视频  

1.2 指定视频来源

目前还没有哪一种视频格式被普遍支持，如果想将视频推向各种各样的HTML5用户，就要做好以多种格式编码视频的准备。

一个不幸的事实是，没有哪一种格式能够用于所有的主流浏览器。因此，必须以多种格式编码视频，直到出现同一一种格式为止。可以使用source元素来指定多个格式。

source元素
允许具有的父元素	video， audio
局部属性	src，type，media

<video width="100%" id="videobg" src="img/video-before.mp4" x-webkit-airplay webkit-playsinline loop>

    <source src="img/video-before.mp4"   type="video/mp4">

    <source src="img/video-before.webm" type="video/webm">

    <source src="img/video-before.ogg"   type="video/ogg">

</video>

2. ——audio——

audio元素
局部属性	autoplay，preload，controls，loop，poster，muted，src

PS: audio和video元素的相似度是如此之高，以至于它们唯一区别仅仅是在屏幕上占据的空间大小。audio元素不会占用一大块屏幕空间来显示视频图像。事实上，甚至可以用audio元素来播放视频文件（当然，这么做只能听得到配乐），也可以用video元素来播放音频文件（不过视频显示区域会保持空白）。这看起来很奇怪，但其实是可行的。

解决iphone中，视频播放时自动在新窗口打开

<video src="video.mp4" x-webkit-airplay webkit-playsinline>

一、首先查看canvas与video的兼容性

canvas与video兼容性除了Opera Mini有区别外，其它兼容性相同。

所以需要检查.mp4格式的兼容性。

大概运行机制：

1. 第97张图片前用的是帧动画(219)，97之后用的是视频播放。

2. 页面是用canvas绘制帧图片播放的，通过播放到哪张图片，显示相应的文字，并结合video相应的隐藏；

页面中如果没有video帧动画会照常播放，只不过是不会隐藏相应的文字；

2.给页面添加video视频播放，为其添加touchstart, touchend事件(h:34)，根据要求在某个时间执行暂停与显示与隐藏相应的文字。

之下：

在Firefox中.mp4格式报错，于是乎查：

二、既然兼容性差别不大，但又无法解码，所以需要检查.mp4格式的兼容性。

Video 
       Firefox ：支持Ogg Theora格式和WEBM (不支持.mp4)
　　Opera ：支持Ogg Theora格式和WEBM 
　　Safari ：支持MP4 
　　Chrome ：支持Ogg Theora格式，MP4和WEBM 
　　Internet Explorer 9 ：支持MP4和WEBM(需要安装插件) 
　　IOS ：支持MP4 
　　Android ：支持MP4和WEBM(Android 2.3版本以上) 
 为了支持上述所有的浏览器，建议使用WebM和MP4视频文件作为source元素。例如。

mp4格式视频无法在chrome中播放

　　Chrome浏览器支持HTML5，它支持原生播放部分的MP4格式（不用通过Flash等插件）。
为 什么是部分MP4呢？MP4有非常复杂的含义（见http://en.wikipedia.org/wiki/Mp4），普通人对MP4的理解是后缀 为.mp4的文件。但MP4本身不是一种简单的视频格式，它是一个包装了视频和音频格式的壳。至于里面的视频和音频使用什么编码格式是可变的。MP4的视频格式可以使用DivX也可使用H264，Chrome只支持H264。
然后，我猜测问题的原因是这样的：Chrome浏览器见到MP4后缀的文件，使用了原生HTML5视频播放起播放，但却发现视频格式无法解码。对于Firefox，它不支持原生播放MP4，于是使用了Flash，绝大部分的视频格式基本都可通过Flash播放。
这 篇2011年1月的消息提到Google将放弃对H264的支持：http://www.infoq.com/cn/news/2011/01 /chrome-h264。这篇是Google方面的描述：http://blog.chromium.org/2011/01/html-video- codec-support-in-chrome.html。如果Google不再支持在Chrome上原生播放MP4，那么会调用Flash播放器播 放，这样反而不会出现有些MP4文件播放不了的问题。
为什么Chrome不支持所有的视频编码格式？绝大部份的视频编码格式都是要付版权费的，Google已经为H264买了单，Firefox没有Google那么有钱不愿意买。

解决方案：使用“格式工厂”转码  或者  

Free Video Compressor进行转码并压缩

转码前：

video-before.mpr是没有转码格式的视频

<video width="100%" id="videobg" src="img/video-before.mp4" x-webkit-airplay webkit-playsinline loop>

    <source src="img/video-before.mp4" type="video/mp4">

</video>

会报无法被解码。

转码后：

<video width="100%" id="videos"  poster="img/1.jpg" src="img/video-after.mp4" x-webkit-airplay webkit-playsinline loop>

    <source src="img/video-after.mp4" type="video/mp4">

</video>

poster=""是视频播放时默认显示的图片：

错误不存在了，视频可以播放了。

三、使video视频自适应窗口宽高

动态改变video宽高：

var video=document.getElementById("videos");

video.width=window.innerWidth;

video.height=window.innerHeight;

在家有没有发现即使是给video定义宽度，自适应屏幕，然视频也不到边的情况。

标签上width，height属性分别为屏幕宽高，但视频还是不能完全全屏并贴边展示。

解决方案：

 video{

    position: absolute;

    right: 0;

    bottom: 0;

    z-index: -1;

    min-width: 100%;

    min-height: 100%;

    width: auto;

    height: auto;

    top: 50%;

    left: 50%;

    -moz-transform: translate(-50%, -50%);

    -ms-transform: translate(-50%, -50%);

    -webkit-transform: translate(-50%, -50%);

    transform: translate(-50%, -50%);

    background-size: cover;

} 

四、类似微信里的视频播放

先自动播放，单击时全屏播放

<video data="1" width="100%" height="100%" id="videobg" src="js/video1.mp4" poster="img/1.jpg" autoplay x-webkit-airplay="true" webkit-playsinline="true">

</video>

var video = document.getElementById("videobg");

var data=document.getElementById("videobg").attributes[0].value;

$("#wrap-video").click(function(){

    if(data == 1){

        $("video").attr("controls",null); 

        $("video").addClass("videoplay");

        $("#p").addClass("rgba");

        video.currentTime=0;

        video.play();

        data = 0;

    }else if(data == 0){

        $("video").removeClass("videoplay");

        $("#p").removeClass("rgba");

        video.currentTime=0;

        video.play();

        data=1;

    }

});

为其添加单击事件，单击时为其添加背景，并播放。