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

Question

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が悪いのでしょうか。
よろしくお願いします。

Answer 1

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

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

Comments

[manabunbun]

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

よろしくお願いします。

[oikashinoa]

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

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

[oikashinoa]

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

[manabunbun]

ご回答ありがとうございました。
>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の問題なのでしょうか、それとも自分の設定がどこか悪いのでしょうか。
よろしくお願いします。

[manabunbun]

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

[oikashinoa]

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

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

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

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

[manabunbun]

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

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

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

[oikashinoa]

>>縦軸 ブラウザ(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が記載有ったので環境の対象にしていたと思いますが。

[manabunbun]

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