一个非常给力的播放器video-js
video-js采用的是html5播放器。
在不支持html5的浏览器会自动切换成flash。
video-js的官网http://www.videojs.com/
看看下载的demo就知道个大概了。
不过在ie9上某些视频流会出问题。
不过加上:
<!--[if lt IE 9]>
<script src="${resSys}/html5.js" type="text/javascript"></script>
<![endif]-->
我是这么写的。
引入样式和js
<link href="${base}/thirdparty/video-js/video-js.css" rel="stylesheet" type="text/css">
<script src="${base}/thirdparty/video-js/video.js"></script>
播放器:
<video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="500" height="350"
poster=""
data-setup="{}">
<source src="${base}/thirdparty/video-js/04140025hf10.flv" type='video/flv' />
<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
</video>
${base}是我的项目路径,请大家自行更改。
亲测chorme,360,ie7,ie8,ie9,可用支持flv,mp4。
一个非常给力的播放器video-js的更多相关文章
- JavaScript多个h5播放器video,点击一个播放其他暂停
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- HTML5播放器 MediaElement.js 使用方法
目前已经有很多html5播放器可以使用,使用html5播放器可以轻松的在页面中插入媒体视频,从而使我们的web页面变得更加丰富多彩,所以今 天向大家推荐一款非常优秀的html5播放器MediaElem ...
- Hide-Music-Player 一个完整的音乐播放器《IT蓝豹》
Hide-Music-Player 一个完整的音乐播放器 Hide-Music-Player 一个完整的音乐播放器,本例子主要包括几个点 (1)摇一摇进入播放器 (2)下拉展开新视图(扫描音乐) (3 ...
- Swift - 制作一个在线流媒体音乐播放器(使用StreamingKit库)
在之前的文章中,我介绍了如何使用 AVPlayer 制作一个简单的音乐播放器(点击查看1.点击查看2).虽然这个播放器也可以播放网络音频,但其实际上是将音频文件下载到本地后再播放的. 本文演示如何使用 ...
- 用H5和js写一个移动端自定义播放器
前言 由于html5自带的播放器样式不怎么好看,大多数人都是自己写一个来满足业务需求.这一次的需求如下: 1.不要上一曲下一曲 2.有进度条和播放暂停按钮 3.有时间显示 demo实现功能 1.进度条 ...
- JS写一个漂亮的音乐播放器
先放上效果图: 正如图中所展示的播放器那样,我们用HTML+CSS+JS将这个效果实现出来. HTML页面布局 <div class="music"> <div ...
- jqm视频播放器,html5视频播放器,html5音乐播放器,html5媒体播放器,video开展demo,html5视频播放演示示例,html5移动视频播放器
最近看到很多有用的论坛html5视频播放的发展,音乐播放功能,大多数都在寻找答案.所以,我在这里做一个demo.对于大家互相学习.html5开发越来越流行,至于这也是一个不可缺少的一部分的视频. 如何 ...
- 习课的视频播放器 video.js
jsp <%@ page language="java" contentType="text/html; charset=utf-8" pageEncod ...
- [HTML5和Flash视频播放器]Video.js 学习笔记(一 ) HLS库:videojs-contrib-hls
DEMO地址:https://github.com/Tinywan/PHP_Experience https://github.com/videojs/videojs-contrib-hls 下载JS ...
随机推荐
- 22. 使用 awk / grep / head / tail 命令进行文本 / 日志分析 (/home/D/acc.log)
一.awk # 统计 a-read-file 接口 中,接口耗时 超过 0.007 秒的有多少个请求 D@Demon ~]$ awk '$7>0.007' acc.log | w ...
- JSON 学习笔记
学习使用json过程随笔: json数组格式 var employees = [ { "firstName":"Bill" , "lastName&q ...
- javascript正则简单入门
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- SQL中的delete和TRUNCATE的用法
TRUNCATE TABLE 表名 删除表中的所有行,而不记录单个行删除操作. 语法 TRUNCATE TABLE name 参数 name 是要截断的表的名称或要删除其全部行的表的名称. 注释 TR ...
- 0104.1——视图控制器UIViewController
一.生命周期 当一个视图控制器被创建,并在屏幕上显示的时候. 代码的执行顺序1. alloc 创建对象,分配空间2.init (initWit ...
- (原)ubuntu16在torch中使用caffe训练好的模型
转载请注明出处: http://www.cnblogs.com/darkknightzh/p/5783006.html 之前使用的是torch,由于其他人在caffe上面预训练了inception模型 ...
- 50中制作图表的JS库
参看以下链接:http://www.tuicool.com/articles/FZNjMz
- CentOS安装配置ganglia
1. 下载ganglia源码包并解压 wget http://sourceforge.net/projects/ganglia/files/ganglia%20monitoring%20cor ...
- 极客”一词,来自于美国俚语“geek”的音译,一般理解为性格古怪的人
起源 “ 极客”一词,来自于美国俚语“ geek”的音译,一般理解为性格古怪的人.数学“极客”大多是指,并不 一定是数学专业但又对数学等技术有狂热的兴趣并投入大量时间钻研的人.又 译作“ 奇客”.以前 ...
- 不用图片,纯Css3实现超酷的类似iphone的玻璃气泡效果
最近在一个私活做手机项目时候,需要实现一个类似ios 6中短信那样的气泡效果. 这里分享下实现心得,希望能给大家一点启发. 首先分析下iphone的气泡效果有一下特点 1. 四面圆角 2. 界面上向下 ...