第一种使用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>

<!-- <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

<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>

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

win10html5无法播放,win10系统中网页中无法播放视频怎么办
近日有win10系统用户要通过浏览器来打开网页观看视频的时候,却发现在网页中打开视频的时却无法播放,这是怎么回事呢,经过分析是由于Adobe Flash Player ActiveX插件未安装.版本过 ...
Java Web学习(2)：静态网页与动态网页
一静态网页 (1)静态网页概述在网站设计中,纯粹HTML(标准通用标记语言下的一个应用)格式的网页通常被称为"静态网页",静态网页是标准的HTML文件,它的文件扩展名是.htm ...
【暑假学习笔记】之——用Intellij idea新建一个java web+Servlet项目（有实例）——idea中快速重写父类的方法
Intellij idea中快速重写父类方法在写java文件时,有时候需要重写父类方法,但在idea中创建java文件时并不会像eclipse一样可以选择父类,但是重写父类方法其实只需要这样做: 鼠 ...
python 录制web视频教程_如何录制网页上的直播视频？请尽量详细一点，最好是完整教程【】...
怎么录制网页上的直播视频? 屏幕录像软件虽然能录制任何视频等内容,但是效果非常不理想,建议等以后在下载别人制作好的视频吧!临时没有太好的软件! 如何录制网页上的直播视频?请尽量详细一点,最好是完整教程 ...
获取网页链接里的视频原件
此篇文章故事发生的背景是:某教师想要提取某公众号的视频资源作为教学文件,一开始这位老师的需求是将她自己录好的视频进行页面裁剪(如下图,将录的视频裁剪成只有视频区域),着实难到我了,后面仔细发现录的视频 ...
Android 实战 - 个人App乐逗项目(查看网页链接封装,播放视频封装)
1.查看网页链接封装和 Android实战-个人App乐逗项目(第一阶段:微信精选文章完成与总结) 中的webview一样,采用腾讯x5浏览服务sdk调用的. 效果预览 : 所需工具 : 腾讯x ...
网页通过Flash播放视频
众所周知要想在网页上播放视频有很多种方式,比如通过H5里面的Video标签,选择对应的参数,可以帮你自动加很多功能,比如暂停,播放,快进快退,调节音量,全屏播放,下载等等.但是这种方式也有很多缺点,就 ...
网页不能自动播放视频、音频的解决方案
至于原因,就是谷歌以及基于 Chromium 开发的浏览器自身限制,出发点是影响用户体验,想想也是,万一,一不小心点开哪个网页,突然播放一些乱七八糟的声音,而且特别大声,估计谁也受不了. 考虑到目前地 ...
在app和h5页面中播放视频监控
本文章向大家介绍app和h5播放实时视频监控. 我是把我们公司的小程序做成app但是在播放视频监控这一块出现了问题,app和h5页面不支持live-player(小程序原生标签)后台报错组件注册失败, ...
网页html里播放苹果音频m4a格式文件
JW Player是一款非常优秀的网页媒体播放器,支持H.264 ( .mp4, .mov, .f4v ).FLV ( .flv ) .3GPP ( .3gp, .3g2 ).OGG Theora ( ...

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

第一种使用jQuery库的 video.js

第二种 ckPlayer调用html5来播放

第三种调用windows自带的 media player

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

最新文章

热门文章

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

第一种 使用jQuery库的 video.js

第二种 ckPlayer调用html5来播放

第三种 调用windows自带的 media player

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

最新文章

热门文章

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

第一种使用jQuery库的 video.js

第三种调用windows自带的 media player

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