H5给我们提供了video标签，但是浏览器的支持情况不同
    不同的视频格式文件，我们可以通过source解决
    但是外观样式，还有暂停，播放，全屏等功能我们只能自己写代码解决
    这个时候我们可以使用插件方式来制作
    zy.media.min.css
    zy.media.min.js

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>视频插件的使用</title>
    8.     <link rel="stylesheet" href="./视频插件zy.media.js/zy.media.min.css">
    9.     <script src="./视频插件zy.media.js/zy.media.min.js"></script>
    10.     <style type="text/css">
    11.         #modelView {
    12.             background-color: #DDDDDD;
    13.             z-index: 0;
    14.             opacity: 0.7;
    15.             height: 100%;
    16.             width: 100%;
    17.             position: relative;
    18.             display: none;
    19.         }
    21.         .playvideo {
    22.             padding-top: auto;
    23.             z-index: 9999;
    24.             position: relative;
    25.             width: 300px;
    26.             height: 200px;
    27.         }
    29.         .zy_media {
    30.             z-index: 999999999
    31.         }
    32.     </style>
    33. </head>
    34. <body>
    35.     <div class="playvideo">
    36.         <div class="zy_media">
    37.             <video data-config='{"mediaTitle": "蝴蝶"}'>
    38.                 <source src="./视频插件zy.media.js/mov.mp4" type="video/mp4">
    39.                 您的浏览器不支持HTML5视频
    40.             </video>
    41.         </div>
    42.         <div id="modelView"></div>
    43.     </div>
    44.     <script>
    45.         zymedia('video', {
    46.             autoplay: false
    47.         });
    48.     </script>
    49. </body>
    50. </html>

    .