1. まず、弾幕ビデオの元の写真を見せてください。事実がそれを物語っています。
2.コード表示
1>htmlコード表示
<div class=barrage> <video id=myvideo 自動再生ループ width=100% height=300px> <source src=video/1.mp4> </video> <div class=screen> <div class=content> <!- -コンテンツがここに表示されます--> </div> </div> <!--送信ダイアログ ボックス--> <div class=send> <input type=text class=s_text placeholder=Enter を使用して弾幕をすばやく送信します/> <input type=button class=s_btn value=Send/> <!--弾幕機能を閉じる--> <span class=barrage_close>弾幕を閉じる</span> < !-- ミュートfunction--> <span id=muted>ミュートをオンにする</span> </div> </div>
2>CSSコード表示
*{ パディング: 0; マージン: 0;}input{ アウトライン: なし;}.barrage { 位置: 相対; 幅: 100%; 高さ: 250%; :300px; */ 上: -50px; 左: 0; z-index: -1;}.barrage .screen { 位置: 絶対;右: 0px; 幅: 100%; 高さ: 300px; }.barrage .content { 位置: 相対; 高さ: 250px; /* フィルタ: アルファ(不透明度) =100); *//***ie8 以降のブラウザの場合****/ 背景色: 透明; 1;}.barrage .screen .content div { 位置: 絶対; フォントサイズ: 20 ピクセル; 空白: 行の高さ: 40; }.barrage .send { 位置: 絶対; 幅: 100%; 行の高さ: 55 ピクセル; 1; /*背景: #000;*/ 背景: rgba(0,0,0,0.5); /*表示: なし;*/}.barrage:hover .send{ 表示: ブロック; }.barrage .send .s_text { 幅: 60%; 高さ: 35px; フォントサイズ: 16px;フォントファミリー: Microsoft Yahei; 境界線: 20px; }.barrage .send { 幅: 105px; 行の高さ: 35px; -半径: 10ピクセル; 0.8;}.barrage_close,#muted {幅: 80px; 高さ: 30px; テキスト整列: 中心: #fff; : 0.8;}#ミュート{背景:黄色;}.barrage_close1{色: #fff; 背景: #fff;}/* css アニメーション*/.content div{ アニメーション:テキスト 15 秒 無限 通常;}@keyframes テキスト{ 0%{ left:100% } 20%{ left:75%; %{ 左:0% } 100%{ 左:-30%;3>jsコード表示
$(function () { $(.barrage_close).click(function(){ $(.content div).remove(); }); init_barrage();});//弾幕コンテンツを配列に入れて保存しますit var arr=[];var h=arr.push();// 送信を監視します。ドキュメントを送信するには Enter キーを押します。οnkeydοwn=function(event){ var e =event || window.event; if(e && e.keyCode==13){ // console.log(11111); $(.send .s_btn).click();// コメントを送信 $(.send .s_btn ).click(function () { var text = $(.s_text).val(); if (text == ) { alert('コンテンツが空です。送信する前にコメントを記入してください'); } var _lable = $(<div style='right:20px;top:0px;opacity:1;color: + getColor() + ;'class='content_text'> + text + </div>); $(.content).append(_lable.show()); $(.s_text).val();});//弾幕技術関数の初期化 init_barrage() { var _top = 0; $(.content div).show().each(function () { var _left =$ ( .barrage).width();//左の位置の値としてのブラウザの最大幅 (ブラウザの高さでもあります) console.log(_left); =$(.barrage).height();//ビデオウィンドウの最大高さ console.log(_height); if (_top >= (_height - 150)) { _top = 0; this ).css({ left: _left, top: _top, color: getColor() }); // テキストを定期的にポップアップ表示します // var time = 10000; // if ($(this).index() % 2 == 0) { // 時間 = 15000; // $(this).animate({ left: - + _left + px }, time, function () { // $(this).remove(); // }); });}//ランダムな色を取得する function getColor() { return '#' + (function (h) { return new Array(7) - h.length).join(0) + h }) ((Math.random() * 0x1000000 << 0).toString(16))}var video=document.getElementById(myvideo);var mute=document.getElementById( muted);console.log(muted);//ビデオの再生速度を設定します//video.playbackRate = 0.5;//ビデオをミュートします video.muted = false;mute.οnclick=function(){ if(video.muted){ video.muted = false; mute.innerText = 'ミュートをオンにする'; / / console.log(1111) }else{ video.muted = true; mute.innerText = 'ミュートをオフにする';コンソール.ログ(2222) }}3. コード効果のデモンストレーション
<a style="margin: 0px;padding:0px;outline:none;line-height:25.2px;font-size:14px;width:660px;overflow:hidden;clear:both;font-family:tahoma, arial, Microsoft YaHei;"><div class=barrage> <video id=myvideo autoplayloop width=100% height=300px> <source src=video/1.mp4> </video></div><style> .barrage { 位置: 相対幅; : 100%; 高さ:250px;}#myvideo{ 位置: 絶対; 高さ: 100%; -50ピクセル; 左: 0; z-インデックス: -1;}要約する上記は編集者が導入した HTML5 でのビデオ連打機能です。ご質問があればメッセージを残してください。編集者がすぐに返信します。また、VeVb武道サイトを応援してくださった皆様、誠にありがとうございました！
この記事が役立つと思われる場合は、転載していただいてかまいませんので、出典を明示してください。ありがとうございます。