HTML5的标签 video 支持的mp4编码为视频编码 H.264 音频AAC

参考网址

http://www.w3school.com.cn/html5/html_5_video.asp

视频格式

当前，video 元素支持三种视频格式：

格式	IE	Firefox	Opera	Chrome	Safari
Ogg	No	3.5+	10.5+	5.0+	No
MPEG 4	9.0+	No	No	5.0+	3.0+
WebM	No	4.0+	10.6+	6.0+	No

Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件

MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件

WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件

使用video.js播放mp4

不是h.264编码格式先使用格式工厂转换一下。

HTML头部引用

 <link href="http://vjs.zencdn.net/5.6.0/video-js.css" rel="stylesheet">

 <script src="http://vjs.zencdn.net/5.6.0/video.js"></script>

 <!-- If you'd like to support IE8 -->

 <script src="http://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>

这里是绑定a播放标签. 禁止A标签冒泡 href= 'javascript:void(0) '.

点击播放显示遮罩层以下是遮罩层HTML代码不要忘记引用jquery

遮罩层HTML代码

<div class="theme-popover">

       <div class="theme-poptit">

           <a href="javascript:;" title="关闭" class="close">×</a>

       </div>

       <div class="mv">

           <video id="my-video" class="video-js" controls preload="auto" width="1296" height="728"

                  poster="video/cover.png" data-setup="{}">

               <source src="video/xiangcloud3.mp4" type="video/mp4" />

               <p class="vjs-no-js">

                   To view this video please enable JavaScript, and consider upgrading to a web browser that

                  supports HTML5 video

               </p>

           </video>

       </div>

   </div>

   <div class="theme-popover-mask"></div>

点击HTML 参考

 <a href="javascript:void(0)" id="play">查看视频<i></i></a>

JS代码

 <script type="text/javascript">

     $(document).ready(function () {

  $('#play').on("click" , function(){

            $('.theme-popover-mask').show();

            $('.theme-popover').show();

           /*autoplay video*/

            var my_video=videojs('my-video');

            videojs('my-video').ready(function(){

                var myvideo= this;

                myvideo.play();

            });

        });

        /*close button*/

        $('.close').on("click" , function (){

            $('.theme-popover-mask').fadeOut(100);

            $('.theme-popover').slideUp();

            $('#viedo').remove();

            /*close video*/

            var my_video=videojs('my-video');

            videojs('my-video').ready(function(){

                var myvideo= this;

                /* myvideo.ended();*/

                myvideo.currentTime(0);

                myvideo.pause();

                /* myvideo.paused();*/

            });

        });

     })

    </script>

　CSS代码

  <style type="text/css">

    /*video*/

    .theme-popover{

        z-index:9999;

        position:fixed;

        top:0%;

        left:50%;

        width:1296px;

        height: 728px;

        margin:20px 0 0 -648px;

        border:solid 2px #666;

        display:none;

        box-shadow: 0 0 10px #666;

    }

    .theme-poptit a{

        position: absolute;

        right: -8px;

        top: -10px;

        color: rgb(0, 0, 0);

        font-size: 20px;

        background: rgb(255, 255, 255);

        border-radius: 15px;

        width: 20px;

        height: 20px;

        text-align: center;

        line-height: 20px;

        text-decoration:none;

        z-index: 1000;

    }

    .theme-popover-mask{

        z-index: 9998;

        position:fixed;

        top:0;

        left:0;

        width:100%;

        height:100%;

        background:#000;

        opacity:0.4;

        filter:alpha(opacity=40);

        display:none;

    }

    </style>

以下都为零散记录

点击播放mp4 显示遮罩层
$('#play1').on("click" , function(){

    $('.theme-popover-mask').show();
    $('.theme-popover').show();
/*下面自动播放mp4文件*/

 var my_video=videojs('my-video');
    videojs('my-video').ready(function(){
        var myvideo= this;
        myvideo.play();
    });

});
关闭遮罩层
/*close button*/
$('.close').on("click" , function (){
    $('.theme-popover-mask').fadeOut(100);
    $('.theme-popover').slideUp();
    $('#viedo').remove();
/*这里还需要关闭video.js播放 这里只关闭了遮罩层 停止播放mp4 不刷新的情况下 从刚才播放的时间继续播放 并不是从新开始播放*/

var my_video=videojs('my-video');
videojs('my-video').ready(function(){

    var myvideo= this;
    myvideo.pause();
});

});


CSS代码 遮罩

<style type="text/css">

    /*video*/

    .theme-popover{

        z-index:9999;

        position:fixed;

        top:0%;

        left:50%;

        width:1296px;

        height: 728px;

        margin:20px 0 0 -648px;

        border:solid 2px #666;

        display:none;

        box-shadow: 0 0 10px #666;

    }

    .theme-poptit a{

        position: absolute;

        right: -8px;

        top: -10px;

        color: rgb(0, 0, 0);

        font-size: 20px;

        background: rgb(255, 255, 255);

        border-radius: 15px;

        width: 20px;

        height: 20px;

        text-align: center;

        line-height: 20px;

        text-decoration:none;

        z-index: 1000;

    }

    .theme-popover-mask{

        z-index: 9998;

        position:fixed;

        top:0;

        left:0;

        width:100%;

        height:100%;

        background:#000;

        opacity:0.4;

        filter:alpha(opacity=40);

        display:none;

    }

添加代码

poster为封面图片代码

source为多个链接地址并且默认开始使用第一个可以用的

 <video id="my-video" class="video-js" controls preload="auto" width="1296" height="728"

                   poster="video/cover.png" data-setup="{}">

                <source src="video/xiangcloud3.mp4" type="video/mp4" />

                <p class="vjs-no-js">

                    To view this video please enable JavaScript, and consider upgrading to a web browser that

                   supports HTML5 video

                </p>

            </video>

自动播放视频 JS代码 videojs里的使用的是标签video的ID值，

var my_video=videojs('my-video');
videojs('my-video').ready(function(){
    var myvideo= this;
    myvideo.play();
});

秒客网

视频播放效果--video.js播放mp4文件

视频格式

使用video.js播放mp4

相关文章