視頻播放效果--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();});