一个非常给力的播放器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 ...
随机推荐
- [Spring入门学习笔记][创建网站URL]
设计网站的URL 现代的Web站点都会设计一套拥有明确意义,方便用户记忆的URL,不论是域名还是路径,以天码营为例: http://tianmaying.com/courses表示网站下所有的课程列表 ...
- NET基础课--对象的筛选和排序(NET之美)
1.数据量不大的时候取出数据缓存于服务器,然后排序,筛选等基于缓存进行以提高效率. 排序或筛选的方法是使用集合类型提供的,如List<T>.sort() List<T>.Fi ...
- Javascript进阶篇——( JavaScript内置对象---下)--Array数组对象---笔记整理
Array 数组对象数组对象是一个对象的集合,里边的对象可以是不同类型的.数组的每一个成员对象都有一个“下标”,用来表示它在数组中的位置,是从零开始的数组定义的方法: 1. 定义了一个空数组: var ...
- MongoDB学习笔记06
在shell中删除一个集合,执行db.test.drop()或者db.runCommand({"drop":"test"}),在MongoDB中命令其实是作为一 ...
- Python3.5入门学习记录-列表、元组、字典
1.列表 python列表的定义使用[] list = [1,2,3,4,5] #创建一个心列表list 获取列表中的值 first = list[0] #list中第一个值 last = list[ ...
- Struts2之Action基础与配置
Action基础 Action是什么 在Struts2中,一个Action类代表一次请求或调用,每个请求的动作都对应于一个相应的Action类,一个Action类是一个独立的工作单元.也就是,用户的每 ...
- 导入android项目在eclipse中会报@Override错误
很多时候导入android项目在eclipse中会报@Override错误,这是由于java编译器的版本不正确,Java 1.5的编译器默认对父类的方法进行覆盖,采用@Override进行说明:但1. ...
- 使用myfocus制作焦点图
第一步:引入myfocus基本库和所要使用样式的js和css文件 <script src="js/myfocus-2.0.1.min.js"></script&g ...
- js实现checkbox全选与反选
<script type="text/javascript" language="javascript"> function checkAll(id ...
- centos6.4x64安装vncserver
参考文章:http://blog.csdn.net/mchdba/article/details/43058849 主要是远程安装oracle11g需要用到这个东西: 进入系统依次执行下列命令: #查 ...