视频播放效果--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();
});
视频播放效果--video.js播放mp4文件的更多相关文章
- video.js播放mp4文件
HTML5的标签 video 支持的mp4编码为视频编码 H.264 音频AAC 参考网址 http://www.w3school.com.cn/html5/html_5_video.asp 视频格式 ...
- 使用opencv在Qt控件上播放mp4文件
文章目录 简介 核心代码 运行结果 简介 opencv是一个开源计算机视觉库,功能非常多,这里简单介绍一下OpenCV解码播放Mp4文件,并将图像显示到Qt的QLabel上面. 核心代码 头文件 #i ...
- 流媒体测试笔记记录之————解决问题video.js 播放m3u8格式的文件,根据官方的文档添加videojs-contrib-hls也不行的原因解决了
详细代码Github:https://github.com/Tinywan/PHPSharedLibrary/tree/master/Tpl/Html5/VideoJS 想播放hls协议的就是m3u8 ...
- 流媒体技术学习笔记之(四)解决问题video.js 播放m3u8格式的文件,根据官方的文档添加videojs-contrib-hls也不行的原因解决了
源码地址:https://github.com/Tinywan/PHP_Experience 总结: 说明: 测试环境:本测试全部来自阿里云直播和OSS存储点播以及本地服务器直播和点播 播放器:Vid ...
- ios video标签部分mp4文件无法播放的问题
问题描述: 部分MP4文件在ios的微信浏览器中无法播放,点击播放后缓冲一下之后显示叉,而另外一些mp4文件正常,同时在安卓全部下正常. 分析: h264编码的压缩级别问题导致. 苹果官方文档中对 i ...
- Web视频播放之video.js
h5这么火是有它的理由的,支持原生视频播放,但是目前兼容性还不是很好,因此使用js框架支持网站视频播放是比较不错的选择. 下载video.js,我们可以通过官网去下,但是官网在国外,我尝试了几次均下载 ...
- HTML5视频播放插件 video.js介绍
video.js是一款很流行的html5视频播放插件.很适合在移动端播放视频(比如微信网页),功能强大,且支持降级到flash,兼容ie8.官网:http://videojs.com/ git& ...
- [HTML5和Flash视频播放器]Video.js 学习笔记(一 ) HLS库:videojs-contrib-hls
DEMO地址:https://github.com/Tinywan/PHP_Experience https://github.com/videojs/videojs-contrib-hls 下载JS ...
- 【vue】使用 Video.js 播放视频
目录 安装 引入 使用 参考文档 环境: vue 2.0+ element ui (这里的代码用了elmentui的按钮样式,可以不用elment ui的样式) 安装 在项目中安装 video.js. ...
随机推荐
- winform 应用log4net做日志记录到mysql
1.nuget装log4net 2.nuget控件台装 mysql.data Install-Package mysql.data -version 6.8.3 (太高的版本用不了,切记) 3.修改a ...
- C# 把string字符导出到txt文档方法
public static string writtxt(string html, string file) { FileStream fileStream = new FileStream(Envi ...
- CI框架伪静态化配置
CI框架伪静态化配置 伪静态化,即:去掉入口的index.php, 在url后面加上 .html 后缀 CI默认的rewrite url中是类似这样的,例如你的CI根目录是在/CodeIgniter/ ...
- mongodb 3.2.x 启动 Warning 错误处理
[root@restore1 data1]# mongod --dbpath=/data/data1/mongodb_data/ --directoryperdb ** WARNING: You ar ...
- Unity对象池管理
链接: http://www.xuanyusong.com/archives/2925 http://www.xuanyusong.com/archives/2974 https://www.cnbl ...
- BarTender连接不上数据库怎么办
由于各种原因,在使用BarTender连接到数据库时,有可能会出现无法连接的问题,下面下编就针对两种BarTender无法连接到数据库的问题,来教大家解决的方法. 第一种 BarTender无权打开文 ...
- sql2008,sa不能使用:不能为主体 sa 中设置凭据
打开属性对话框,为 SQL Server Administrator 帐户,然后您执行了"sa"登录使用 SQL Server Management Studio 工具.您修改为在 ...
- less语法(一)变量与extend
摘要: 作为 CSS 的一种扩展,Less 不仅完全兼容 CSS 语法,而且连新增的特性也是使用 CSS 语法.这样的设计使得学习 Less 很轻松,而且你可以在任何时候回退到 CSS.less文件是 ...
- selenium +chrome headless Adhoc模式渲染网页
mannual和adhoc模式比较 Manual vs. Adhoc In the script above, we start the ChromeDriver server process whe ...
- C#WinForm窗体事件执行次序
当 Windows Form 应用程序启动时,会以下列顺序引发主要表单的启动事件: System.Windows.Forms.Control.HandleCreated ...