シンプルなビデオ連射機能を実装する JavaScript CSS3

この記事では、最も単純なビデオ連射機能をシミュレートするデモを作成します。

アイデア:

再生する動画と同じサイズの <div> を設定し、この div タグを動画の上に配置して箇条書きコメントを配置します。箇条書きコメントリストを表示するには、動画の右側に <ul> リストを配置します。

画面上の箇条書きコメントは、<span> タグ内にコンテンツを配置します。一般的に、テキスト行は左から右に流れていきます。この動きは、簡略化のため、 CSS3 の transition 属性を使用しています。位置は絶対値に設定され、
次に、transition left 属性を使用して弾幕の動きを実現します。もちろん、フォントが飛び出すときに飛び出した部分が隠れるように、親要素のスタイルを overflow:hidden; に設定することにも注意してください。

[送信] をクリックすると、入力のコンテンツ、現在の日付、ビデオの再生進行状況 video.currentTime が取得され、このコンテンツが配列内のオブジェクトとして保存されます。 div マスクに箇条書きコメントを配置するための span タグを追加し、左を設定すると、現在の左から次の左に遷移し、移動が実現されます。遷移後は、span タグは役に立たなくなります。removeChild を使用して親要素から削除します。同時に、生成された <li> タグを ul に追加します。

コード：

<!--CC により 2017/10/11 に作成-->
 
<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>タイトル</title>
</head>
<スタイル タイプ="text/css">
    .mainBody{
        マージン: 10px 自動;
        テキスト配置: 中央;
        フォントファミリ: Arial;
        位置:相対;
    }
    。送信{
       幅:700ピクセル;
        マージン:0px 自動;
        テキスト配置:左;
    }
     .my-msg{
         幅:85%;
         高さ:35px;
     }
    .my-btn{
        背景色: #ccd0d7;
        境界線の半径: 8px;
        幅: 50px;
        高さ: 35px;
        左マージン:30px;
        境界線:1px実線 #00a1d6;
    }
    .my-list{
        表示:インラインブロック;
        垂直方向の位置合わせ: 上;
        境界線:1px 実線 #ccd0d7;
        幅:200px;
        高さ:450px;
        オーバーフロー:自動;
    }
    .my-tm{
        位置:絶対;
        上:0px;
        高さ:366px;
        幅: 710ピクセル;
        オーバーフロー:非表示;
    }
    .rtol{
        位置:絶対;
        表示: インラインブロック;
        高さ:28px;
        オーバーフロー: 非表示;
        フォントサイズ:24px;
        色:#fff;
        左:720px;
        -moz-transition:left 4s linear;
        -webkit-transition:left 4s linear;
        -o-transition:left 4s linear;
    }
    ul{
        テキスト配置: 左;
        リストスタイルタイプ:なし;
        上マージン:0px;
        左パディング: 8px;
    }
    li span {
        テキスト配置: 左;
        色: #99a2aa;
 
    }
</スタイル>
<本文>
<div>
    <div class="mainBody">
        <div style="display:inline-block">
        <video src="/big_buck_bunny.mp4" height="400" コントロール></video>
        <div class="送信">
            <input type="text" class="my-msg" id="msgcc" placeholder="一斉送信~">
            <input type="button" class="my-btn" id="sendcc" value="送信">
        </div>
        </div><div class="my-list">
            <span style="color: #00a1d6">〜弾幕スクリーン〜</span>
            <hr style="border-top:2px solid #185598"/>
            <ul id="msg">
            </ul>
        </div>
        <div class="my-tm" id="tmbox">
        </div>
    </div>
</div>
<スクリプト>
    var tm = document.getElementById('tmbox');
    var btn = document.getElementById('sendcc');
    var ビデオ = document.getElementsByTagName('ビデオ')[0];
    var リスト = document.getElementById('msg');
    var msg = document.getElementById('msgcc');
    var 情報 = [];
 
    window.onlοad=関数()
    {
        //位置を設定します tm.style.left=(document.body.offsetWidth-911)/2+'px';
    }
    window.onresize = 関数(){
        tm.style.left=(document.body.offsetWidth-911)/2+'px';
    }
    //現在の日付を取得する関数 getNowFormatDate() {
        var date = 新しい Date();
        var セパレータ1 = "-";
        var セパレータ2 = ":";
        var 月 = date.getMonth() + 1;
        var strDate = date.getDate();
        (月 >= 1 && 月 <= 9) の場合 {
            月 = "0" + 月;
        }
        strDate >= 0 && strDate <= 9 の場合 {
            strDate = "0" + strDate;
        }
        var currentdate = 月 + セパレータ1 + strDate
            + " " + date.getHours() + seperator2 + date.getMinutes();
        現在の日付を返します。
    }
 
    //送信ボタンを押す btn.onclick=function(){
        var 値=msg.値;
        if(値&&値!='')
        {
            var itemInfo = {};
            itemInfor.value=値;
            itemInfor.showTime=video.currentTime; //timeitemInfor.sendTime=getNowFormatDate(); //送信時間//連打リストvar li=document.createElement('li');
            li.className='my-li';
            li.innerHTML="<span> > "+値+"</span>";
            リストに追加される子要素は li です。
 
            //現在の箇条書き画面 var text=document.createElement('span');
            テキストクラス名='rtol';
            text.style.top=Math.floor( Math.random()*12 )*30+'px';
            text.innerHTML=値;
            tm.appendChild(テキスト);
 
            //左位置 setTimeout(function(){
                text.style.left=-value.length*25+'px';
            },200);
 
            //次に、表示されていないスパンを削除します setTimeout(function(){
                    tm.removeChild(テキスト)
                     // 既存の箇条書きコメントが現在送信されている表示と競合しないようにするには、ここで配列に追加します infor.push(itemInfor);
                },5000
            ）
        }
    }
 
    //既存の箇条書き画面を表示する setInterval(function(){
      ビデオが一時停止されている場合
      {
          infor.forEach(関数(アイテム){
              var currentTime=ビデオ.currentTime;
              if(item.showTime<video.currentTime&&item.showTime>=(video.currentTime-0.5))
              {
                  var テキスト = document.createElement('span');
                  テキストクラス名='rtol';
                  text.style.top=Math.floor( Math.random()*12 )*30+'px';
                  text.innerHTML = アイテムの値;
                  tm.appendChild(テキスト);
 
                  //左位置 setTimeout(function(){
                      text.style.left=-(item.value.length*25)+'px';
                  },200);
 
                  //次に、表示されていないスパンを削除します setTimeout(function(){
                          tm.removeChild(テキスト);
                      },5000
                  ）
 
              }
          });
      }
    },500)
</スクリプト>
 
 
</本文>
</html>

効果：

記述は簡単ですが、トランジションの left 属性を一時停止できないという大きな問題があり、当然、トランジションアニメーションは完了するまで待機することしかできません。つまり、各 <span> タグの移動は、インターバルタイマーを使用して完了します。しかし、このように書くと少し複雑になります。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: