兼容各种版本浏览器网页视频播放制作路程
今天主要是分享一些关于做视频广告的心得，我们大家都知道，现在h5有个标签——<video>是支持视频播放的，在主流的浏览器支持h5的情况下，这是可行的，但是往往需求要求支持低版本浏览器要兼容，如IE9以下浏览器、GeckoBrowser内核浏览器等，在这些浏览器上使用<video>标签是无法正常运行的，那该如何解决视频播放兼容不同版本的浏览器呢，今天我推荐的是jquery-1.8.0.min.js+flowplayer-3.2.11.min.js+flowplayer-3.2.12.swf来实现。
首先先准备需要用到的文件，jquery-1.8.0.min.js(http://www.veryhuo.com/down/html/jquery1.8.html)，flowplayer-3.2.11.min.js(http://down.51cto.com/data/433764)，flowplayer-3.2.12.swf（http://www.kuaixiazai.com/fileview_2811772.html），准备好后创建项目，项目大概是这样：
VideoProject
js文件夹->jquery-1.8.0.min.js、flowplayer-3.2.11.min.js、flowplayer-3.2.12.swf
video文件夹->放对应的视频
video.html
页面将jquery-1.8.0.min.js和flowplayer-3.2.11.min.js引用进来，
<script src="js/jquery-1.8.0.min.js" type="text/javascript"></script>
<script src="js/flowplayer-3.2.11.min.js" type="text/javascript"></script>
在页面添加一个div,<div id="tl_player" style="width: 645px; height: 500px;"></div>
初始化视频：
<script language="javascript">
var currNum = 0;
var api = flowplayer("tl_player", "../../js/lib/video/flowplayer-3.2.12.swf",
{
clip:
{
autoPlay: false,
autoBuffering: true,
loop: true
},
playlist: [
{
url: "video/aa.mp4",
autoPlay: true
},
{
url: "video//minneapolis_cedarlake.mov",
autoPlay: true
}
],
onFinish: function () {
if (currNum == 1)
{
currNum = -1;
this.play(0, { autoPlay: true });
}
currNum++;
}
});
</script>
这边主要讲解下这段代码的一些属性的使用：flowplayer（）初始化视频播放器播放配置，上面第一个参数“tl_player”对应div中的id即可，第二个参数是播放器的皮肤（这个皮肤你可以在网上另外找也行），具体要讲的是第三个参数配置，playlist->播放视频列表，主要结构含视频播放的Url，当然里面还可以加相应视频播放的一些其他参数，这里加了autoPlay，设置为true，即播放器加载视频后自动播放，onFinish->视频播放后事件，这里可以操作视频播放完毕后相应操作，上面t this.play(0, { autoPlay: true });是指视频播放完毕后重新播放第一个视频，效果如下：
兼容各种版本浏览器网页视频播放制作路程相关推荐
- vue 检测ie版本_Vue2+Webpack+ES6 兼容低版本浏览器（IE9）解决方案
Vue2+Webpack+ES6 兼容低版本浏览器(IE9)解决方案 解决方式:安装 "babel-polyfill" 即可. 命令:npm install --save-dev ...
- React+Webpack+ES6 兼容低版本浏览器（IE9）解决方案
React+Webpack+ES6 兼容低版本浏览器(IE9)解决方案 参考文章: (1)React+Webpack+ES6 兼容低版本浏览器(IE9)解决方案 (2)https://www.cnbl ...
- element ui 兼容低版本浏览器
基于ES6的用Vue框架element ui写的页面,如果当需要解决兼容低版本浏览器时,会遇到在低版本浏览器中不显示效果,页面一片空白,但控制台也不报错,而在高版本可以正常显示的情况. 低版本效果: ...
- React 项目兼容低版本浏览器
兼容低版本浏览器真的是让人头大,不过现在好在有框架鱼插件的运用,让我们轻松的兼容低版本浏览器,本文中以 DvaJS Cli 举例 下载 react-app-polyfill 和 core-js 插件 ...
- 解决vue项目在ie浏览器中无法显示的问题，兼容低版本浏览器问题
解决vue项目在ie浏览器中无法显示的问题,兼容低版本浏览器问题 1.在csdn中找到了一下解决方案,但与本项目略有不同 vue项目兼容ie浏览器的问题:在其他浏览器显示都是正常的,在ie11下显示空 ...
- vue3.0 + vite2.0+如何兼容低版本浏览器
这里写自定义目录标题 一.问题 二.解决 三.解决方案 四.打包预览 一.问题 在使用vue3.2和vite2 开发一个移动端或者钉钉端 H5 微服务 ios app内置浏览器打开没问题 安卓 app ...
- css3兼容各版本浏览器前缀—— -webkit-、 -moz-、 -ms-、 -o-
css3兼容各版本浏览器前缀 前缀 浏览器 -webkit- :chrome(谷歌).safari(游猎) -moz- : firefox(火狐) -ms- :IE -o- : opera
- 【CSS】清除浮动 ③ ( 清除浮动 - 使用 after 伪元素 | 语法简介 | 兼容低版本浏览器 | 原理分析 )
文章目录 一.清除浮动 - 使用 after 伪元素 ( 最流行写法 ) 1.额外标签法 和 overflow 样式法弊端 2.after 伪元素清除浮动简介 3.after 伪元素清除浮动核心代码 ...
- form的submit()方法不能触发onsubmit事件的解决方法，兼容各版本浏览器。
form的submit()方法不能触发onsubmit事件的解决方法,兼容各版本浏览器. 参考文章: (1)form的submit()方法不能触发onsubmit事件的解决方法,兼容各版本浏览器. ( ...
最新文章
- 收藏 | 卷积神经网络 C++ 从零开始实现
- vw实现移动端自适应页面
- 网工路由基础（3）RIP原理与配置
- YBTOJ：幻灯片（二分图匹配）
- 咋安装redhatlinux镜像在哪下载_Windows7正版系统安装教程
- beautifulsoup 搜索第二个标签_自定义网站搜索教程
- 当 Messaging 遇上 Jepsen
- 海湾监控计算机,海湾GST-DH9300电气火灾监控图形显示系统软件
- cv2.error: OpenCV(4.5.3) :-1: error: (-5:Bad argument) in function ‘line‘ 报错解决
- 牛客网暑期ACM多校训练营（第五场）B. div(技巧+OEIS or Pell方程)
- android 的layout
- Java练习题_通过2月天数来判断平年闰年
- SAP SD 销售订单收入和成本对应科目的逻辑
- python中平方_python中平方
- 初赛模拟试题错题锦集
- 【土旦】vue项目中 使用 pako.js 解密 gzip加密字符串
- 两周自制编程语言读书总结
- android拷机工具,【AndroidFramework】【EMMC拷机】混合拷机时盒子待机
- javaSE简单介绍
- 计算机创建只读用户,如何把电脑的文件夹在局域网共享成只读，别人不能删除和修改？...