jQueryで動画に流した文字を一時停止するには?

jQueryで動画上に文字を流して、一時停止させるコードを探しています。

文字を流すだけのコードはウェブで見つけることができました。そのコードを使って作ったのが以下です。
http://onlinelanguage.info/?page_id=3841

動画下の空欄に文字を入力して、「追加」すると動画上に文字を流すことができます。コードは以下です。

<div id="nicoscreen" style="overflow: hidden; height: 315px; width: 560px; position: relative;">
    <iframe width="560" height="315" src="https://appear.in/kidohdes" frameborder="0" allowfullscreen></iframe>
</div>
<div id="comment_list">
    <ul id="list">
    </ul>
</div>
<input id="comment_text" name="comment" type="text" /><input type="button" onclick="addComment()" value="追加" />

これを、以下に修正するためには、どうすれば良いでしょうか?

1)流れる文字をクリックして停止、更にクリックして終了させる
2)流れる文字の高さは一定にする

どなたかご教示いただけましたら幸甚です。どうぞ、よろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

1)流れる文字をクリックして停止、更にクリックして終了させる

作成したnic_commentにクリックで停止処理を追加し、停止時にさらに削除処理を追加します。

    nico_comment.one('click', function(){
        $(this).stop().one('click', function(){
            $(this).remove();
        });
    });

2)流れる文字の高さは一定にする
offsetのtopを固定値にすれば、高さは一定になります。

var offset = nico_comment.offset({top:0,left:commentPos.left + $('#nicoscreen').width()});

あと、

id名は重複してはいけないので、id=itemはclass=itemの方が良いです。

個人的に、

jqueryデータの変数は、$nico_commentのように先頭に$を付けるとわかりやすいです。
onclickは、jqueryを使っているで、$('#comment_text').click()で登録したほうが分かりやすいです。

サンプル
http://codepen.io/YamasakiKenta/pen/QwXWPz

投稿2015/04/09 01:07

ymknjugg

総合スコア131

OzakiNobuhiko

2015/04/09 03:45

ご回答いただいてたいへんありがとうございます。サンプルで示していただいたURLにあるページでは、見事目的を達していました。ただ、それを普通のphpに転記する方法が分かりません。やって見ると、http://onlinelanguage.info/kaihatsu/kaihatsu_message.php　動かないのです(とほほ・・・)。申し訳ないのですが、再度解決方法をご教示いただけませんでしょうか?

ymknjugg

2015/04/10 00:22

リンク先は、アクセスエラーで表示できませんでした。解決方法は、PHPのソースコードを提示していた抱かない事にはわからないです。 PHPタグを使用しなければ、PHPもHTMLも変わらないのでそのまま転記すれば動きます。動かないのであれば、HTMLかJavaScriptが間違っています。一度、HTMLのみで構成し動作を理解してからPHPに移植するのがいいかもしれないです。また、サンプルとソースを比較するのであれば、Diffツールを使用するば簡単に見つけることができます。参考にWindowsでのツールを乗せておきます。 **winMerge** http://www.geocities.co.jp/SiliconValley-SanJose/8165/winmerge.html

OzakiNobuhiko

2015/04/10 09:19

ありがとうございます。何とかうごくようになりました。感謝、感謝です!!

mingo

2015/12/13 15:35 編集

横からすみません。教えていただけると助かります。このスクリプトをCodepen上では動作確認できたのですが、コピーしたものを、ローカルとレンタルサーバー上で試すと、コメントが送信されません（試したブラウザはfireFoxとChromeとsafariです）。 jqueryはヘッダで読んでいます。 <script type="text/javascript" src="jquery-2.1.4.min.js"></script> 設置の仕方がわるいのでしょうか？ htmlと同じ階層に.jsを置いています。 "http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" にしてもだめでした。 (ちなみに$をjQueryにしてもダメでした。)

ymknjugg

2015/12/14 07:23

javascriptが読みこまれていない気がします。 javascriptを別ファイル(sample.js)に記述した場合は、jqueryの後に読み込む必要があります。 ```html <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script type="text/javascript" src="./sample.js"></script> ``` 開発者モード(ChromeだとF12)で確認すると何かつかめるかもしれないです。

mingo

2015/12/14 12:42

返信ありがとうございます。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script type="text/javascript" src="./script.js"></script> として、ヘッダに置いても、bodyの閉じタグ前でも読まない状況です。 javascriptコンソールを見てみると、angular.js でエラーが出ている、のですが、これは使っているつもりがないのにどこかで読んでいるのですよね？不勉強なためよく分かっていません…。

行動規範の内容に同意します