Java Web でオンラインビデオ再生を実現するためのいくつかの一般的な方法

**

1. jQuery ライブラリを使用した Video.js

(1) まず、video.js URL をダウンロードする必要があります: http://www.jq22.com/jquery-info404

(2) 次に、再生する html/jsp ページに js を導入します。

(3) 再生する div に親 div (m) を追加し、そのスタイルを定義します

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

**

2. ckPlayer は html5 を呼び出して再生します

対応動画フォーマット:h5と呼ばれるため、動画再生フォーマットはh5がサポートする4つのフォーマットとなります。MP4、m3u8、webm、ogg、flv

インポート js URL: http://www.ckplayer.com/

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

元のサイズの幅と高さは固定値です。100% に設定すると、親 div で完全にカバーされます。

**

3. Windows に付属のメディア プレーヤーを呼び出す

利点: すべての主流のビデオ、オーディオ、および画像フォーマットがサポートされています。このプレーヤーの使用に慣れていない場合もありますが。でも、このプレイヤーは対応フォーマットが多いので、実用的でいいですね。アップロードする前にビデオをトランスコードする必要はありません。
短所: 一部のブラウザではサポートされていません。現在、Firefox をサポートし、Google がサポートしていないブラウザ IE 360 を試しています。

メディアはコードを直接コピーし、ビデオの URL を変更せずにビデオを再生できます。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>

おすすめ

転載: blog.csdn.net/m0_54849806/article/details/126723560