Java web 几种实现在网页页面里播放视频的 插件及方法

第一种 使用jQuery库的 video.js

 (1) 首先我们要下载video.js   网址：http://www.jq22.com/jquery-info404

(2)然后在要播放的html/jsp 页面引入js
<script src="../res/js/video.min.js"></script>

(3)在要播放的div 加一个父div （m）并且定义它的样式
<style>
        body{background-color: #191919}
        .m{ width: 1300px; height: 650px; margin-left: auto; margin-right: auto; }
    </style>

（4）播放器的位置 下面的代码只需要修改视频的地址就可以播放视频

    <div class="m">
        <video id="my-video" class="video-js" controls preload="auto" width="640" height="264"
          poster="MY_VIDEO_POSTER.jpg" data-setup="{}">
            <source src="${videoUrl }" type="video/mp4">
            <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>
          <script src="http://vjs.zencdn.net/5.18.4/video.min.js"></script>    
          <script type="text/javascript">
            var myPlayer = videojs('my-video');
            videojs("my-video").ready(function(){
                var myPlayer = this;
                myPlayer.play();
            });
        </script>

    </div>

第二种 ckPlayer调用html5来播放

支持的视频的格式: 因为是调用h5,所以视频的播放格式就是h5支持的4种格式。MP4、m3u8、webm、ogg、flv

引入js  网址：http://www.ckplayer.com/
<script type="text/javascript" src="../res/js/ckplayer/ckplayer.js"></script>

<!-- CkPlayer只调用 html5  -->
    <!-- <div class="m">
    <div id="video" style="width:100%;height:100%;"></div>
    
  <script type="text/javascript">
    var videoObject = {
        container: '#video',//“#”代表容器的ID，“.”或“”代表容器的class
        variable: 'player',//该属性必需设置，值等于下面的new chplayer()的对象
        flashplayer:false,//如果强制使用flashplayer则设置成true
        allowFullScreen:true,//是否支持全屏
        video:{
            file:'${videoUrl }',//视频地址
            type:'video/mp4'
        }
    };
    
        var player=new ckplayer(videoObject);
    
  </script>
 </div>
  原来的大小width 、height是一个固定的值，我把它设置为100%，它就在父div中铺满了

第三种 调用windows自带的 media player

优点：主流的视频、音频、图片格式都支持。虽然我们有时候很不习惯使用这个播放器。但是这个播放器支持的格式多，实用就好啊。不用在上传视频之前对视频进行转码。
缺点：有些浏览器不支持。目前我尝试的浏览器IE 360这两个支持 火狐和谷歌不支持

media直接复制一下代码，什么都不用加 改一下视频地址就可播放视频了。不需要加div
<!--调用 Windows 自带的media播放器  --><!--目前支持IE 360这两个，狐火只支持MP4 -->
  <div class="m">
  <object id="MediaPlayer" classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95" width="100%" height="100%" standby="Loading Windows Media Player components…" type="application/x-oleobject" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,7,1112">
    <param name="FileName" value="${videoUrl }">
    <param name="AutoStart" value="true">
    <param name="ShowControls" value="true">
    <param name="BufferingTime" value="2">
    <param name="ShowStatusBar" value="true">
    <param name="AutoSize" value="true">
    <param name="InvokeURLs" value="false">
    <param name="AnimationatStart" value="1">
    <param name="TransparentatStart" value="1">
    <param name="Loop" value="1">
    <param name="container" value="#video">
    <embed type="application/x-mplayer2" src="${videoUrl }" name="MediaPlayer" autostart="1" showstatusbar="1" showdisplay="1" showcontrols="1" loop="0" videoborder3d="0" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" width="800" height="600"></embed>
 </object>
 </div>