Java web 实现视频在线播放的常用几种方法

Java web 实现视频在线播放的常用几种方法1 使用 jQuery 库的 video js 1 首先我们要下载 video js 网址 http www jq22 com jquery info404 2 然后在要播放的 html jsp 页面引入 js 3 在要播放的 div 加一个父 div m 并且定义它的样式 4

大家好,我是讯享网,很高兴认识大家。

1. 使用jQuery库的 video.js

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

(2)然后在要播放的html/jsp 页面引入js

(3)在要播放的div 加一个父div (m)并且定义它的样式

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

讯享网


讯享网

2. ckPlayer调用html5来播放

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

引入js 网址:http://www.ckplayer.com/

讯享网<!-- <div class="m"> <div id="video" style="width:100%;height:100%;"></div> 

原来的大小width 、height是一个固定的值,我把它设置为100%,它就在父div中铺满了

3.调用windows自带的 media player

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> 
小讯
上一篇 2025-01-10 19:22
下一篇 2025-01-14 09:27

相关推荐

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容,请联系我们,一经查实,本站将立刻删除。
如需转载请保留出处:https://51itzy.com/kjqy/125785.html