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

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) '.

<a href="javascript:void(0)"  id="play1">播放</a>

点击播放显示遮罩层 以下是遮罩层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();
});