当前位置:永利皇宫官网 > 永利皇宫官网 > jplayer.js 与 video.js

jplayer.js 与 video.js

文章作者:永利皇宫官网 上传时间:2019-10-23

HTML5 - 两款基于JS的视频播放器

都是基于h5 video 标签,如果不支持则会自动转成flash,这里个人比较推荐使用jplayer;

1、video.js

jplayer.js 与 video.js。pc端有时候会与视频打交道,如果要兼容ie是个比较烦的事情,特别是对于没有pc端经验,比如我就更加烦。

jplayer.js 与 video.js。我一开始是用的video.js ,因为开始看video.js api  

1  <video id="my-video" class="video-js" controls preload="auto" width="640" height="264"
2   poster="MY_VIDEO_POSTER.jpg" data-setup="{}">
3     <source src="MY_VIDEO.mp4" type='video/mp4'>
4     <source src="MY_VIDEO.webm" type='video/webm'>
5     <p class="vjs-no-js">
6       To view this video please enable JavaScript, and consider upgrading to a web browser that
7       <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
8     </p>
9   </video>

非常喜欢,然后直接用,悲剧的是在ie 7、ie8存在一些问题,如各个版本的ie 样式不一致,如果是高版本ie7报错等!

jplayer.js 与 video.js。果断放弃;

2、jplayer.js

 

之所以推荐jplayer插件是因为它的兼容性是最好的,可以兼容到IE6,官网上对它兼容性有很详细的说明

图片 1

1、不仅兼容性好,而且样式一致。

2、扩展性强。

api: 

看完这个就会更加喜欢了,至少我是这样的,因为这个东西可以定制化,随便你怎么改图片 2

把图标一换是不是有点像暴风语音。

使用注意事项:

jPlayer需要在服务器上上传两个文件:
jquery.jplayer.min.js
Jplayer.swf(如果不是放在js文件中,要注意路径是否正确)

在两个文件一定要上传到服务器,开始使用的时候以为这个swf是在不支持视频播放的时候要自己准备的swf,过10多分钟才明白,jplay 不需要自己准备swf,他会自己转码,之所以会有这个想法完全是受之前vjdeo.js的影响。

代码

图片 3图片 4

 1  <script>
 2     //<![CDATA[
 3     $(document).ready(function () {
 4 
 5         $("#jquery_jplayer_1").jPlayer({
 6             ready: function () {
 7                 $(this).jPlayer("setMedia", {
 8                     title: "",
 9                     m4v: "http://1318.vod.myqcloud.com/1318_2cb48eca442111e6a46d294f954f93eb.f0.mp4",
10                     webmv: "http://1318.vod.myqcloud.com/1318_2cb48eca442111e6a46d294f954f93eb.f0.webm",
11                     poster: "@ViewHelper.Content("/content/img/video_bg.png")"
12                 });
13             },
14             swfPath: "../../content/js/jsplayer/videoResource/",
15             supplied: "webmv, ogv, m4v",
16             size: {
17                 width: "640px",
18                 height: "360px",
19                 cssClass: "jp-video-360p"
20             },
21             useStateClassSkin: true,
22             autoBlur: false,
23             smoothPlayBar: true,
24             keyEnabled: true,
25             remainingDuration: true,
26             toggleDuration: true
27         });
28 
29     });
30     //]]>
31 </script>

View Code

图片 5图片 6

 1  <div id="jp_container_1" class="jp-video jp-video-360p" role="application" aria-label="media player">
 2           
 3             <div class="jp-type-single">
 4                 <div id="jquery_jplayer_1" class="jp-jplayer"></div>
 5                 <div class="jp-gui">
 6                     <div class="jp-video-play">
 7                         <button class="jp-video-play-icon" role="button" tabindex="0">play</button>
 8                     </div>
 9                     <div class="jp-interface">
10                         <div class="jp-progress">
11                             <div class="jp-seek-bar">
12                                 <div class="jp-play-bar"></div>
13                             </div>
14                         </div>
15                         <div class="jp-current-time" role="timer" aria-label="time">&nbsp;</div>
16                         @*<div class="jp-duration" role="timer" aria-label="duration">&nbsp;</div>*@
17                         <div class="jp-controls-holder">
18                             <div class="jp-controls">
19                                 <button class="jp-play" role="button" tabindex="0">play</button>
20                                 @*<button class="jp-stop" role="button" tabindex="0">stop</button>*@
21                             </div>
22                             <div class="jp-volume-controls">
23                                 <button class="jp-mute" role="button" tabindex="0">mute</button>
24                                 @*<button class="jp-volume-max" role="button" tabindex="0">max volume</button>*@
25                                 <div class="jp-volume-bar">
26                                     <div class="jp-volume-bar-value"></div>
27                                 </div>
28                             </div>
29                             <div class="jp-toggles">
30                                 @*<button class="jp-repeat" role="button" tabindex="0">repeat</button>*@
31                                 <button class="jp-full-screen" role="button" tabindex="0">full screen</button>
32                             </div>
33                         </div>
34                         @*<div class="jp-details">
35                             <div class="jp-title" aria-label="title">&nbsp;</div>
36                         </div>*@
37                     </div>
38                 </div>
39                 <div class="jp-no-solution">
40                     更新要求
41                     要播放媒体,您需要更新您的浏览器到最近的版本或更新您的<a href="http://get.adobe.com/flashplayer/" target="_blank">Flash插件</a>.
42                 </div>
43             </div>
44         </div>

View Code

 

 说的够详细了,demo也很多就不多说了,改改demo总有一款适合你。

可以多多看下官网的api,你就找到了方法,我这个分析的并不全面,如果大家有什么疑问,希望可以多多交流。

 

本文由永利皇宫官网发布于永利皇宫官网,转载请注明出处:jplayer.js 与 video.js

关键词: