マスターページ使用時のJavascript

解決済

質問者：ekekojr
質問日時：2014/10/11 10:35
回答数：2件

vs2012 c#で作成しています。
下記のjavascriptをマスターページを使用したContentPlaceHolderID何に記述し、
playボタンを押すと、再生されません。
（正確には再生直後にリロードが発生しているように見えます）
通常のhtmlページでhead内に書くと問題なく再生できるのですが、
なぜこうなるのか教えて下さい。

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage2.master" AutoEventWireup="true" CodeFile="test3.aspx.cs" Inherits="test3" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolderContent" Runat="Server">

<div>
<input id="file" name="file" type="file" onchange="preview()" class="form-control" />
</div>

<div class="flex-video widescreen" style="margin: 0 auto; text-align: center;">
<video id="video" class="videoUiWrapper thumbnail" controls loop muted preload="auto" ></video>
</div>

<div>
<button id="btnPlay" onclick="playVideo()" class="btn btn-primary">play</button>
<button id="btnPause" onclick="pauseVideo()" class="btn btn-primary" >pause</button>
</div>

<script type="text/javascript">

function preview() {
var fileData = document.getElementById("file").files[0];
if (fileData.name != "") {
tryVideo(fileData);
}
}

function tryVideo(file) {
if (!/video/.test(file.type)) {
return alert('videoぢゃない');
}
if (!/probably|maybe/.test(video.canPlayType(file.type))) {
return alert('再生できる動画ファイルぢゃないyo');
}
video.src = URL.createObjectURL(file);
}

function playVideo() {
video.play();
}

function pauseVideo() {
video.pause();
}

</script>

</asp:Content>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： shockatz
回答日時：2014/10/12 17:31

えーと、

対応する MasterPage の ConetntPlaceHolder がどの位置にあるのか不明ですが、<body></body>内部にあるのであれば、ブラウザによってはスコアの高い js が順次解釈となって、関数定義の順序が問題になることがあるかもしれません。

関数定義をリテラルにして、明示的に宣言順を明確にするか、<head> 部に ContentPlaceHolder を作って、<script> 部分を全部そちらに移すのがいいと思いますが。

<head>
<title>
<asp:ContentPlaceHolder runat="server" id="PH_Title" />
</title>
<asp:ContentPlaceHolder runat="server" id="PH_Head" />
</head>
<body>
<asp:ContentPlaceHolder runat="server" id="PH_Main" />
</body>

この回答への補足

回答ありがとうございます。
ConetntPlaceHolder はBodyにあります。

ただ、上記スクリプトを下記のようにマスターページのHEAD内に移しても
減少が改善されません。

通常のhtmlページで確認すると、headに書いても、bodyに書いても問題なく実行されるので
理由が分かりません。

もし、お気づきの点があれば教えて頂けると助かります。

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage2.master.cs" Inherits="MasterPage2" %>
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>

<script type="text/javascript">

function preview() {
var fileData = document.getElementById("file").files[0];
if (fileData.name != "") {
tryVideo(fileData);
}
}

function tryVideo(file) {
if (!/video/.test(file.type)) {
return alert('videoぢゃない');
}
if (!/probably|maybe/.test(video.canPlayType(file.type))) {
return alert('再生できる動画ファイルぢゃないyo');
}
video.src = URL.createObjectURL(file);
}

function playVideo() {
video.play();
}

function pauseVideo() {
video.pause();
}

</script>

</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ContentPlaceHolder id="ContentPlaceHolderContent" runat="server">

</asp:ContentPlaceHolder>

</div>
</form>
</body>
</html>

補足日時：2014/10/13 09:31

通報する

- 0
- 件

通報する

この回答へのお礼

ありがとうございます。
検証しながらやってみます

通報する

お礼日時：2014/10/15 11:07

No.2

回答者： shockatz
回答日時：2014/10/13 23:20

うーん、変ですね。

ASP.NETでMasterPageを使用している場合でも、Javascriptの実行はあくまで、合成されたHTMLがサーバでレンダリングされた後なので、生成されたHTMLとJavascriptに違いがなければ、同様に実行されるはずです。

ただ、WebFormsなどでは、ViewStateに大量の遷移データが入ったり、postbackなjavascriptが生成されたりと、オーバーヘッドの大きいHTMLが出来ていますので、その分でJavascriptのDOM要素解釈が遅れる可能性もあります。
HTMLですと、クライアントキャッシュが読まれているケースもあり、オーバーヘッドに気付かない場合もありますので、

１．ブラウザキャッシュをすべて消去してHTML版を実行

２．Master/Contentを使わない「フラット」なaspxで動作を確認

１・２で動作が正常なら、「フラット」なaspxと「Master/Content」なスキームで、生成されるHTMLがどこが違うのか検証する

という流れを取ってみてください。