当前访客身份:游客 [ 登录  | 注册加入尚学堂]
直播

null

拥有积分:24
积分怎么这么少,老师多给点积分啊

博客分类

笔记中心

课题中心

提问中心

答题中心

解答题中心

一个非常给力的播放器video-js

null 发表于 2年前 (2015-01-19 16:19:08)  |  评论(0)  |  阅读次数(33563)| 0 人收藏此文章,   我要收藏   

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。


以上很久之写的了,今天又涌上了,谢了个demo下载地址如下。需要自己加视频

http://download.csdn.net/detail/yc854978821/9538079

分享到:0
关注微信,跟着我们扩展技术视野。每天推送IT新技术文章,每周聚焦一门新技术。微信二维码如下:
微信公众账号:尚学堂(微信号:bjsxt-java)
声明:博客文章版权属于原创作者,受法律保护。如果侵犯了您的权利,请联系管理员,我们将及时删除!
(邮箱:webmaster#sxt.cn(#换为@))
北京总部地址:北京市海淀区西三旗桥东建材城西路85号神州科技园B座三层尚学堂 咨询电话:400-009-1906 010-56233821
Copyright 2007-2015 北京尚学堂科技有限公司 京ICP备13018289号-1 京公网安备11010802015183