video标签以及视频播放器的一些实现

    根据前段日子自己做过的需求功能，整理了一些东西

video标签的属性：

• autoplay：自动播放
• controls：向用户显示浏览器自带的控件
• width：视频宽度
• height：视频高度
• loop：循环播放
• muted：静音播放
• poster：视频封面，视频下载时显示的图像，没有播放时显示的图片
• preload：预加载，如果已经使用 "autoplay"，则忽略该属性
• src ：要播放的视频的 URL

上面列出的是常用的一些属性，video 的其他的一些属性可以查阅文档
http://www.w3school.com.cn/jsref/dom_obj_video.asp

Video 对象方法：

方法	描述
addTextTrack()	向视频添加新的文本轨道。
canPlayType()	检查浏览器是否能够播放指定的视频类型。
load()	重新加载视频元素。
play()	开始播放视频。
pause()	暂停当前播放的视频。

Video 对象支持标准属性和事件。

支持的视频格式

• Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件
• MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
• WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件

video 元素允许多个 source 元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式

<video width="320" height="240" controls="controls">
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

用多种格式一般用来处理兼容性问题，还有一种情况是，过低版本的浏览器不支持 <video> 标签，这时候就会使用 flash 来播放视频，所以在做兼容的时候要考虑到这个问题

---

功能实现

<video id="myVideo" src="url" controls width="400px" heigt="400px"></video>

访问 Video 对象
var x = document.getElementById("myVideo");
创建 Video 对象
var x = document.createElement("VIDEO");

如果是要改默认的控制条的css样式，用样式覆盖就好了
例子1：
自定义按钮

<button onclick="playVid()" type="button">Play Video</button>
<button onclick="pauseVid()" type="button">Pause Video</button><br>
<video id="myVideo" width="320" height="176">
    <source src="url.mp4" type="video/mp4">
    <source src="url.ogg" type="video/ogg">
</video>
<script>
    var vid = document.getElementById("myVideo");
    function playVid() {
        vid.play();
    }
    function pauseVid() {
        vid.pause();
    }
</script>

例子2：
横屏竖屏，只能通过video标签的旋转来实现
记得旋转后还需要缩放一下达到合适播放容器。

    /*横屏竖屏转换,不同角度*/
    .reverse-portraint {
        transform: rotate(180deg);
    }
    .landscape {
        transform: scale(1.78, 1.77) rotate(90deg);
    }
    .reverse-landscape {
        transform: scale(1.78, 1.77) rotate(-90deg);
    }

如果你的项目是用手机录制的视频，那么就要在保存视频的时候把录制的角度也存储进去，然后web端就可以做判断，进行不同角度的video旋转。

  if (videoInfo.orientation == '4') {
           $('#myvideo').addClass('landscape');
   } else if (videoInfo.orientation == '3') {
           $('#myvideo').addClass('reverse-portraint');
   } else if (videoInfo.orientation == '2') {
           $('#myvideo').addClass('reverse-landscape');
   } else {
         console.log("默认角度")
           }

例子3：
视频超出屏幕停止播放
用 getBoundingClientRect()方法可以获取到元素的位置参数

//超出屏幕上方停止
var video= document.getElementById("myVideo")
function isElementInViewport(event) {
      var rect = event.getBoundingClientRect();
      if(rect.top < -rect.height / 2){
           video.pause();
      }
   }

例子4：
如果页面有多个视频的，需要做不同视频间的控制，用视频的 id 来进行操作，注意要确保所有视频 id 不同。
功能：点击一个视频，页面中的处于播放状态的视频都暂停
思路：点击播放的时候，把视频 id 保存起来，然后再次点击另一个视频的时候，判断当前的 id 和之前保存的id 是否一样，不一样就用 pause(); 暂停之前的 id 的video 。把这个方法加在相应按钮上。

en~~ 代码就不写出来了!!

---