jsp页面添加视频播放
来源:互联网 发布:用友好会计软件 编辑:程序博客网 时间:2024/04/29 17:08
使用格式工厂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,“.”或“”代表容器的class variable: '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页面播放视频,添加视频
- -jsp页面播放视频
- jsp页面播放视频
- jsp 页面添加视频并显示播放时间
- 周报--jsp页面播放视频
- 页面添加视频播放对象
- jsp页面的视频播放(静态)
- JSP页面实现播放视频功能
- JSP加载播放视频
- JSP播放视频
- JSP播放视频2
- JSP播放视频
- jsp中播放视频
- JSP播放视频
- 页面音频、视频播放
- 页面视频播放器
- 页面视频播放器
- Lrucache
- 对‘pthread_create’未定义的引用
- 上个
- 添加查询删除+retrofit请求+okHttp请求+fresco加载图片+recyclerview加载数据二级购物车+视频播放
- socket.io & Node.js搭建多聊天室
- jsp页面添加视频播放
- Caused by: java.lang.VerifyError: Cannot inherit from final class
- centos 7 常用命令
- JNDI
- 1、操作系统准备(ubuntu + xface4)
- 最后的
- 助力假发线上销售 帕克西3D发型虚拟试戴接入电商平台使用
- 二叉树结构--基础
- SparkMLlib稀疏矩阵