jsp页面添加视频播放

使用格式工厂avi转mp4无图像仅有声音
mp4有3种编码，mpg4(xdiv),mpg4(xvid),avc(h264),只有h264才是公认的MP4标准编码，因此需要设置编码格式为avc

layer层视频全屏样式错乱
在layer弹窗组件中
如果使用了flash播放器，全屏是正常的
但若使用了HTML5的播放器，全屏失效

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title><script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script><script src="layer/layer.js"></script><style></style>
</head>
<body>
<h1>h5 video</h1>
<div id="box">
<video id="video" controls preload="auto" width="400px" height="300px"><source src="http://movie.ks.js.cn/flv/other/1_0.mp4" type="video/mp4">
</video>
</div>
<script>layer.open({type: 1,title: false,shadeClose: true,area: ['400px', '350px'],content: $('#box'),success: function(layero){//layer样式layer-anim导致全屏样式错乱，移除该样式即可setTimeout(function() {$(layero).removeClass('layer-anim');}, 0);}});
</script>
</body>
</html>

setTimeout(function(){},0)函数说明
起因源于一道前端笔试题：

var fuc = [1,2,3];
for(var i in fuc){setTimeout(function(){console.log(fuc[i])},0);console.log(fuc[i]);
}

问：控制台会如何打印？

chrome打印结果如下：
1，2，3，3，3，3

虽然setTimeout函数在每次循环的开始就调用了，但是却被放到循环结束才执行，循环结束，i=3,接连打印了3次3。

这里涉及到javascript单线程执行的问题：javascript在浏览器中是单线程执行的，必须在完成当前任务后才执行队列中的下一个任务。
另外，对于javascript还维护着一个setTimeout队列，未执行的setTimeout任务就按出现的顺序放到setTimeout队列，等待普通的任务队列中的任务执行完才开始按顺序执行积累在setTimeout中的任务。
所以在这个问题里，会先打印1 2 3，而将setTimeout任务放到setTimeout任务队列，等循环中的打印任务执行完了，才开始执行setTimeout队列中的函数，所以在最后会接着打印3次3。
如果代码中设定了一个 setTimeout，那么浏览器便会在合适的时间，将代码插入任务队列，如果这个时间设为 0，就代表立即插入队列，但不是立即执行，仍然要等待前面代码执行完毕。
用处就在于我们可以改变任务的执行顺序！因为浏览器会在执行完当前任务队列中的任务，再执行setTimeout队列中积累的的任务。
通过设置任务在延迟到0s后执行，就能改变任务执行的先后顺序，延迟该任务发生，使之异步执行。

使用flash播放
此处使用ckplayer插件，具体参考ckplayer官方文档，自动检测浏览器对 HTML5 的支持情况，如果不支持 HTML5 则自动使用 Flash 播放器

<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<%@ include file="/include/meta_fxzr.jsp"%><head>    <title>视频教程列表</title>    <meta charSet="utf-8" /><meta httpEquiv="X-UA-Compatible" content="IE=edge" /><meta httpEquiv="Cache-Control" content="no-siteapp" /><meta name="renderer" content="webkit" /><meta name="keywords" content="demo" /><meta name="description" content="demo" /></head><body><div style="text-align:center;"><div class="video" style="width: 100%;height: 100%;"></div></div><script type="text/javascript" src="${ctx}/res/dist/js/ckplayer/ckplayer/ckplayer.js"></script><script type="text/javascript">var videoObject = {container: '.video',//“#”代表容器的ID，“.”或“”代表容器的classvariable: 'player',//该属性必需设置，值等于下面的new chplayer()的对象loaded:'loadedHandler',//监听播放器加载成功autoplay:true,//自动播放//video:'http://118.180.24.208:8090//file-rest/uploads/001/003/2017-12-20/ff808081604959760160735aa78e0125.mp4'//视频地址video:'${url}'  };var player=new ckplayer(videoObject);function loadedHandler(){//播放器加载后会调用该函数player.addListener('time', timeHandler); //监听播放时间,addListener是监听函数，需要传递二个参数，'time'是监听属性，这里是监听时间，timeHandler是监听接受的函数}function timeHandler(t){console.log('当前播放的时间：'+t);}</script></body>
</html>

jsp页面添加视频播放相关推荐

Jsp 页面添加动态水印
//从session 中读取需要的信息 <% javacommon.base.LoginUser user = (javacommon.base.LoginUser) session.getAt ...
java，jsp页面添加提示图以及提示音乐
效果如下: 前台代码 <style> .tx{ width:38px;height:30px;display:inline- block;b ...
JSP页面添加播放视频功能
2019独角兽企业重金招聘Python工程师标准>>> <video id="video" controls preload="auto" ...
java jsp页面如何添加C标签
在https://mvnrepository.com/找两个jar包分别是: <dependency> <groupId>javax.servlet.jsp.jstl</ ...
eclipse中jsp页面图片不显示问题
问题记录: 在给一个web项目里的jsp页面添加一个背景图片,使用background:url的方式获取图片路径,但是一直不显示,最后发现还是根本路径的问题. 解决: 使用java代码获取项目根路径, ...
JSP页面和html页面中文乱码的解决
1.在JSP页面添加 <%@ page contentType="text/html; charset=utf-8" %> <%--这里的utf-8是指服务器发送 ...
添加与编辑共用一个jsp页面时，控制按钮的显示与隐藏
场景添加与编辑共用一个jsp页面,后台action传过来 op参数,如果是edit则执行编辑,如果是add,则执行添加. 如果是编辑页面则显示充值按钮,如果是添加页面则不显示. 实现后台actio ...
SpirngMVC jsp页面空指针
SpirngMVC jsp页面空指针 ,这个错误基本上是jar包冲突,我看网上很多的方案 <dependency><groupId>javax.servlet</grou ...
MyEclipse设置JSP页面默认编码方式
MyEclipse设置JSP页面默认编码方式以及设置在Java文件中作者.日期等说明 MyEclipse设置JSP页面默认编码方式: windows(窗口)-Preferences(首选项)-MyEc ...

jsp页面添加视频播放

jsp页面添加视频播放相关推荐

最新文章

热门文章