質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.52%

  • jQuery

    6689questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • HTML5

    4006questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

video.play() operaで動かない。

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 158

manabunbun

score 18

videoタグの動画をクリックして、再生したりストップしたりさせています。

<section class="serisec">
        <div class="seri_container1">

                <video preload="none" src="/img/kaisya/SeriNO1.mp4" muted id="video" poster="/img/kaisya/serivideo1.jpg">
                    <p>動画を再生するには、videoタグをサポートしたブラウザが必要です。</p>
                </video>
            </div>
        </div>
    </section>
// JavaScript Document
$(function() {
    //video要素の取得
    var video=$("#video").get(0);
    //videoボタンの取得
    var video_btn=$("#video_btn").get(0);
    //状態保存
    var btn_status=0;

    //画面クリックで再生・ポーズ
    $("#video").on("click",function() {

        if(btn_status===0) {
            video.play();
            btn_status=1;
        }else{
            video.pause();
            btn_status=0;
        }
    });

opera(ver54.0)以外のブラウザでは問題なく動くのですが、operaでは"Console"部分に以下のようなエラーが出ます。

Uncaught (in promise) DOMException: Failed to load because no supported source was found.
2,3回続けてクリックすると
"video.play()"の部分でに、
Uncaught (in promise) DOMException: The element has no supported sources.
と表示されます。

これはmp4がダウンロードされてきていないのに、クリックしているからでしょうか。
それともjqueryの記述の仕方が悪いのでしょうか。

ネットで調べましたが、英語のサイトばかりでよくわかりませんでした。
operaが悪いのでしょうか。
よろしくお願いします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

0

Failed to load because no supported source was found.まずは翻訳してみましょうよ。

原因が分かったら違うファイルで試してみて下さい。MP4と言っても中身はいろんなコーデックを使っている可能が有りますよ。ファイル名からするとビデオカメラで撮ったファイルかな?
MP4 - Wikipedia

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/07/20 15:57 編集

    oikashinoaご回答ありがとうございました。mp4へのパスが悪いのだろうと思い、"."をつけたり、"/"を削除したり,"http"から始まるフルパスに変えてみたりしたのですが、動きませんでした。
    console.log(video)でvideo変数を表示させてみると、videoタグの内容が全て表示されていました。
    社内でホームページを開発する環境を作成していますが、こちらはoperaでもvideoが動きます。
    他にどこをチェックしたらよいでしょうか。

    よろしくお願いします。

    キャンセル

  • 2018/07/20 16:13 編集

    1.パス
    opera以外なら再生できたんですよね?
    ではパスは正しいです。

    2.mp4のファイル
    今のmp4が原因なのか以下で切り分けして下さい。
    operaで再生できるmp4なファイルをネットで探してダウンロード→既存の SeriNO1.mp4をバックアップ
    →ダウンロードしたものをSeriNO1.mp4にリネーム→同じパスに置く→再生できるか?

    キャンセル

  • 2018/07/21 01:18

    > 社内でホームページを開発する環境を作成していますが、こちらはoperaでもvideoが動きます。
    上記 見落としてました。
    状況がわからないのですが、
    1.質問で書いている環境は社内ではないとしたら、どういう環境なのでしょうか?
    2.社内で再生できたMP4を、質問で書いた環境に持って行ったら再生できますか?

    キャンセル

  • 2018/07/21 09:37

    ご回答ありがとうございました。
    >1.質問で書いている環境は社内ではないとしたら、どういう環境なのでしょうか?
    ここに設置しています。
    http://kensui.on.arena.ne.jp/infomation/serivideo/
    社内環境は、kensui.on.arena.ne.jpの部分が、"172.16.16.117"となっています。自分でwebサーバー立ち上げています。
    >2.社内で再生できたMP4を、質問で書いた環境に持って行ったら再生できますか?
    出来ません。FTPソフト(FFFTP Ver 1.98g2)を使用して同じものをアップロードしています。
    operaのバージョンは、 54.0.2952.60 です。

    php+Smartyを使用して作成しているのですが、単純にhtmlファイルに
    <video autoplay preload="auto" controls src="/img/kaisya/SeriNO1.mp4">
    </video>
    としてffftpでアップロードしてみましたが、videoコントロールは、表示されるのですが、ファイルが上下に破れた様な画像が表示され動画は、動きませんでした。
    でも172.16.16.117に変更すると表示されます。
    operaの問題なのでしょうか、それとも自分の設定がどこか悪いのでしょうか。
    よろしくお願いします。

    キャンセル

  • 2018/07/23 09:02

    http://mazwai.com/#/ こちらのサイトが無料で使用ができる様なのでダウンロードして、htmlのvideoタグに埋め込んでアップロードしてみましたが、
    閲覧できませんでした。

    キャンセル

  • 2018/07/23 10:13

    > ffftpでアップロードしてみましたが、videoコントロールは、表示されるのですが、ファイルが上下に破れた様な画像が表示され動画は、動きませんでした。

    ffftpについて。
    1 バイナリーモードでmp4アップしてます?
    2 アップしたmp4をダウンロードして、正しくアップロード出来ているか確認してください

    状況が混み合ってきたので以下の観点で状況まとめして下さい。

    縦軸 ブラウザ(pcかモバイルかでも分ける)
    横軸 どこのサイトか。
    複数のmp4で状況異なるなら、ファイル毎で表を作ってください。

    キャンセル

  • 2018/07/23 15:45

    ご回答ありがとうございました。
    ffftpについてですが、
    >1 バイナリーモードでmp4アップしてます?
    バイナリーモードではなかったので、バイナリーモードに変更してアップしましたが、結果変わらず動きませんでした。
    >2 アップしたmp4をダウンロードして、正しくアップロード出来ているか確認してください
    ダウンロードして、ダブルクリックで実行するとWindows10の持つ再生ソフトで再生されました。

    >縦軸 ブラウザ(pcかモバイルかでも分ける)
    調べた限りでは、PC(Win10)のoperaだけが動きません。
    android上の"Opera Touch"は、うまく再生されます。
    >横軸 どこのサイトか
    http://kensui.on.arena.ne.jp/infomation/serivideo/
    ここです。
    >複数のmp4で状況異なるなら、ファイル毎で表を作ってください。
    状況は同じで、再生されません。

    半ばあきらめておりますが、よろしくお願いします。

    キャンセル

  • 2018/07/23 20:24

    >>縦軸 ブラウザ(pcかモバイルかでも分ける)
    >調べた限りでは、PC(Win10)のoperaだけが動きません。
    >android上の"Opera Touch"は、うまく再生されます。
    ここだけ見るとPC(Win10)の問題なんですよねぇ。

    https://windowsreport.com/opera-black-screen-bug/
    ↑の
    Solution 4 – Disable Hardware Acceleration
    から
    Solution 8 – Reinstall Opera
    を試すぐらいかなぁ。それ以上は想像つきません。

    クライアント側の問題だったら手が出しにくいし…
    見もフタもないことを書くと、operaは諦めてもいいんじゃないのですか?
    最初からoperaが記載有ったので環境の対象にしていたと思いますが。

    キャンセル

  • 2018/07/26 09:44

    ご回答ありがとうございます。win7のoperaでも再生できませんでした。
    operaのバグだと思って諦めます。ただ社内LAN環境だとうまく再生できるというのが、解せないですが諦めようと思います。
    色々とありがとうございました。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.52%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • jQuery

    6689questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • HTML5

    4006questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。