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

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

参考网址

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

视频格式

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

格式IEFirefoxOperaChromeSafari
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头部引用

?
1
2
3
4
<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代码

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<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 参考

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

　　

 

JS代码

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<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代码

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<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代码 遮罩

　　

 

添加代码

poster为封面图片代码

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

?
1
2
3
4
5
6
7
8
9
<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();
});

　　

　　

　　

 

posted @   星耀学园  阅读(27582)  评论(1)  编辑  收藏  举报
编辑推荐：
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
阅读排行：
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源！
· 周边上新：园子的第一款马克杯温暖上架
点击右上角即可分享
微信分享提示
AI IDE Trae