HTML5_html/css_WEB-ITnoseをベースにした連打機能付き動画プレーヤー

HTML5 ベースの弾幕機能を備えたビデオプレーヤー

helloweba.com 著者: Moonlight 時間: 2016-04-29 16:29 タグ: player html5

Danmmu Player は、連打機能を備えた HTML5 動画プレーヤーです。ビデオを視聴するときに、ビデオについて自分の意見を表明し、送信ボタンをクリックすると、公開されたコンテンツがビデオ画面上にペイントボールの形で送信され、スクロールするアニメーション効果が表示されます。ビデオ連打機能。

デモを見る ソースコードをダウンロード

使い方

Danmmu Player は jQuery に依存する必要があるため、関連する CSS を追加する必要がありますそしてjsファイルを最初に作成します。

<link rel="stylesheet" href="css/main.css"><script src="js/jquery-2.1.4.min.js"></script><script src="js/jquery.danmu.js"></script><script src="js/main.js"></script>

次に、プレーヤーを配置する必要がある本体内の場所に次のコードを追加します。

<div id="danmup"></div>

最後に、重要な部分はパラメータを設定し、プラグインを呼び出すことです。

$("#danmup").DanmuPlayer({	src: "abc.mp4", //视频源    height: "480px", //区域的高度    width: "800px", //区域的宽度    urlToGetDanmu:"getData.php",  //从后端获取弹幕数据    urlToPostDanmu:"sendData.php"  //发送弹幕数据给后端保存入库});

これで、弾幕プレーヤーを実行できます。もちろん、バックエンドと対話する必要がない場合は、urlToGetDanmu の 2 つのパラメーターを使用せずに、初期データをページに直接追加できます。

$("#danmup .danmu-div").danmu("addDanmu",[    { "text":"这是滚动弹幕" ,color:"white",size:1,position:0,time:2},    { "text":"我是帽子绿" ,color:"green",size:1,position:0,time:3},    { "text":"哈哈哈啊哈" ,color:"#f30",size:1,position:0,time:10},    { "text":"大家好，我是打不死的小强" ,color:"orange",size:1,position:0,time:23}]);

Danmmu Player の addDanmu メソッドは、弾幕コンテンツを画面に追加するものです。これは、次のようなデータの文字列であることがわかります。

text— —弾幕テキストの内容

color—弾幕の色。

position - 弾幕の位置 0 はスクロール、1 は上、2 は下

size - 弾幕のテキスト サイズ。 0 は小さい文字、1 は大きい文字

時間 - 弾幕が表示される時間。 単位は分と秒 (10 分の 1 秒) です。

isnew - この属性が表示されると (属性値は任意)、これはユーザーによって送信された新しい弾幕であると見なされます。枠線が表示される場合があります。

この例では、操作インターフェイスを簡素化し、文字の色、サイズ、位置、透明度などのパラメータ設定を削除し、主要な機能ボタンをいくつか残しました。

バックエンドとのやり取り

実際のプロジェクトを適用すると、フロントエンドの操作とバックエンドが接続され、送信された弾幕コンテンツは画面に表示されるだけでなく、バックエンドデータベースの中間に保存されます。もちろん、データベースの種類はプロジェクトの要件に応じて決定できます。 MySQL またはテキスト ファイルを使用してデータを保存できます。この記事の例では、バックエンドは PHP+MySQL を使用して弾幕コンテンツを読み取り、保存します。

getData.php はバックエンドから弾幕データを取得するために使用されます。ユーザーがビデオの再生を開始すると、誰かがすでに弾幕コンテンツを公開していることがわかっており、このコンテンツはデータベースに保存されているため、このデータを読み取ってビデオ プレーヤー画面に表示する必要があります。

include_once('connect.php'); //连接数据库$json = '[';$query = mysql_query("select * from danmu");while($row=mysql_fetch_array($query)){	$json .= $row['content'].',';}$json = substr($json,0,-1);$json .= ']';echo $json;

データテーブル danmu のフィールド構造と接続データベース ファイル connect.php を表示するには、ソース コード パッケージをダウンロードしてください。

sendData.php は、フロントエンドから投稿された弾幕コンテンツ データを受信し、データ テーブルに保存するために使用されます。

include_once('connect.php'); //连接数据库$danmu=strip_tags($_POST['danmu']);$addtime = time();$sql="INSERT INTO `danmu`(`id`,`content`,`addtime`) VALUES (null,'$danmu','$addtime')";$query=mysql_query($sql); mysql_close();

実際、投稿されたデータを分割し、データ テーブルにさらにいくつかのフィールドを設定して、コンテンツ、色、フォント サイズなどのさまざまな属性を保存してから使用することもできます。 getData。PHP は、json_encode() を使用してデータを直接出力できるため、より柔軟です。

詳細については、github 上の Danmmu Player のプロジェクト アドレスを参照してください: https://github.com/chiruom/DanmuPlayer/

声明: この記事はオリジナルの記事、helloweba.com および著者が著作権を所有します。転載する必要がある場合は、helloweba.com からの出典を示し、元のリンクを保持してください: http://www.helloweba.com/view-blog-362。 html

純粋な CSS を使用してラジオとチェックボックスを美化します