Youtube動画をASP.NETのAJAX Control Toolkit の Balloon Popup に埋め込む
ASP.NETのコントロール Literal に、Youtube動画の埋め込みコードを設定し、マウスオーバーで Control Toolkit の Balloon Popup でポップアップする。なお、YoutubeのURLはTMDbから取得し、DBに登録済。
youTubeEmbeddedPlayer.dll で実現していたけど、Youtubeの仕様変更か？IEの仕様変更か？または他の理由か？わからないが、ポップアップ内で再生するのに、一度フルスクリーンにし、フルスクリーンを解除しなければならなくなった。
テスト
そこで、他の方法を考えることにした。方法は以下の3つを考えた。
- IFRAMEで表示
正しく表示され、ポップアップ内で再生可能。ただし、VisualStudioのデバッグでマウスアウトすると、スクリプトエラーを起こす。 - youTubeEmbeddedPlayer.dll を利用する
一度フルスクリーンにし、フルスクリーンを解除する必要がある。 - OBJECTで埋め込む
再生できない。フルスクリーンにもできない。
よってIFRAMEのコードを Literal に埋め込むすることにした。
Youtubeコード埋め込みの方式確認
Dim objLiteralDataListTrailersDBYouTube As Object = item.FindControl("LiteralDataListTrailersDBYouTube")
Dim objsourceLabel As Object = item.FindControl("YouTubeLabel")
If Not objLiteralDataListTrailersDBYouTube Is Nothing Then
If Not objsourceLabel Is Nothing Then
If objsourceLabel.text <> "" Then
objLiteralDataListTrailersDBYouTube.Text = "<iframe width=""400"" height=""225"" src=""//www.youtube.com/embed/" + objsourceLabel.text + """" + " frameborder=""0"" allowfullscreen></iframe>"
objLiteralDataListTrailersDBYouTube.Text = YouTubeScript.Get(objsourceLabel.text, auto:=False, W:=400, H:=225)
objLiteralDataListTrailersDBYouTube.Text = "<object width=""400"" height=""225""><param name=""movie"" value=""https://www.youtube.com/v/" + objsourceLabel.text + "?version=3&autoplay=0""></param><param name=""allowScriptAccess"" value=""always""></param>" + "<embed src=""https://www.youtube.com/v/" + objsourceLabel.text + "?version=3&autoplay=0" + """" + " Type=""application/x-shockwave-flash""" + " allowscriptaccess=""always""" + " width=""400"" height=""225""></embed>" + "</object>"
End If
End If
End If
Dim objsourceLabel As Object = item.FindControl("YouTubeLabel")
If Not objLiteralDataListTrailersDBYouTube Is Nothing Then
If Not objsourceLabel Is Nothing Then
If objsourceLabel.text <> "" Then
objLiteralDataListTrailersDBYouTube.Text = "<iframe width=""400"" height=""225"" src=""//www.youtube.com/embed/" + objsourceLabel.text + """" + " frameborder=""0"" allowfullscreen></iframe>"
objLiteralDataListTrailersDBYouTube.Text = YouTubeScript.Get(objsourceLabel.text, auto:=False, W:=400, H:=225)
objLiteralDataListTrailersDBYouTube.Text = "<object width=""400"" height=""225""><param name=""movie"" value=""https://www.youtube.com/v/" + objsourceLabel.text + "?version=3&autoplay=0""></param><param name=""allowScriptAccess"" value=""always""></param>" + "<embed src=""https://www.youtube.com/v/" + objsourceLabel.text + "?version=3&autoplay=0" + """" + " Type=""application/x-shockwave-flash""" + " allowscriptaccess=""always""" + " width=""400"" height=""225""></embed>" + "</object>"
End If
End If
End If
実装
Youtube動画はいくつかの画面でポップアップしているのでクラスとして登録する。
ClassMJB.vb
Public Function iframeYoutube(ByVal YotubeURL As String, ByVal Width As String, ByVal Height As String) As String
Dim retYoutube As String
retYoutube = "<iframe width=" + """" + Width + """" + " height=" + """" + Height + """" + " src=""//www.youtube.com/embed/" + YotubeURL + """" + " frameborder=""0"" allowfullscreen></iframe>"
Return retYoutube
End Function
Dim retYoutube As String
retYoutube = "<iframe width=" + """" + Width + """" + " height=" + """" + Height + """" + " src=""//www.youtube.com/embed/" + YotubeURL + """" + " frameborder=""0"" allowfullscreen></iframe>"
Return retYoutube
End Function
LiteralへYoutube動画URLを埋め込み
Dim objLiteralDataListTrailersDBYouTube As Object = item.FindControl("LiteralDataListTrailersDBYouTube")
Dim objsourceLabel As Object = item.FindControl("YouTubeLabel")
If Not objLiteralDataListTrailersDBYouTube Is Nothing Then
If Not objsourceLabel Is Nothing Then
If objsourceLabel.text <> "" Then
objLiteralDataListTrailersDBYouTube.Text = ClassMJB.iframeYoutube(objsourceLabel.text, "400", "225")
End If
End If
End If
Dim objsourceLabel As Object = item.FindControl("YouTubeLabel")
If Not objLiteralDataListTrailersDBYouTube Is Nothing Then
If Not objsourceLabel Is Nothing Then
If objsourceLabel.text <> "" Then
objLiteralDataListTrailersDBYouTube.Text = ClassMJB.iframeYoutube(objsourceLabel.text, "400", "225")
End If
End If
End If
YouTube 埋め込みプレーヤーとプレーヤーのパラメータ - YouTube — Google Developers
https://developers.google.com/youtube/player_parameters?hl=ja
実際の動き
1ページフルにあるところはちょっと重い。
ASP.NETでYoutube動画をポップアップに埋め込む
サンプル
上は固定サイズで表示、中央はテキストボックスに入れた Youtube Video ID とテキストボックスに入れた縦横サイズで表示、下は Youtube Popup をクリックで固定サイズをポップアップ内に表示。
youtube.aspx
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="youtube.aspx.vb" Inherits="youtube" %>
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>
<!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>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<asp:Literal ID="Literal1" runat="server"></asp:Literal>
<br />
<br />
Youtube URL<asp:TextBox ID="TextBoxURL" runat="server"></asp:TextBox>
W<asp:TextBox ID="TextBoxWidth" runat="server" Columns="3"></asp:TextBox>
H<asp:TextBox ID="TextBoxHeight" runat="server" Columns="3"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="" />
<br />
<asp:Literal ID="Literal2" runat="server"></asp:Literal>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<asp:Label ID="Label1" runat="server" Text="Youtube Popup"></asp:Label>
<asp:BalloonPopupExtender ID="Label1_BalloonPopupExtender" runat="server" BalloonPopupControlID="PanelYoutubePopup" BalloonSize="Large" CustomCssUrl="" Enabled="True" ExtenderControlID="" TargetControlID="Label1">
</asp:BalloonPopupExtender>
<asp:Panel ID="PanelYoutubePopup" runat="server">
<asp:Literal ID="Literal3" runat="server"></asp:Literal>
</asp:Panel>
</div>
</form>
</body>
</html>
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>
<!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>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<asp:Literal ID="Literal1" runat="server"></asp:Literal>
<br />
<br />
Youtube URL<asp:TextBox ID="TextBoxURL" runat="server"></asp:TextBox>
W<asp:TextBox ID="TextBoxWidth" runat="server" Columns="3"></asp:TextBox>
H<asp:TextBox ID="TextBoxHeight" runat="server" Columns="3"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="" />
<br />
<asp:Literal ID="Literal2" runat="server"></asp:Literal>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<asp:Label ID="Label1" runat="server" Text="Youtube Popup"></asp:Label>
<asp:BalloonPopupExtender ID="Label1_BalloonPopupExtender" runat="server" BalloonPopupControlID="PanelYoutubePopup" BalloonSize="Large" CustomCssUrl="" Enabled="True" ExtenderControlID="" TargetControlID="Label1">
</asp:BalloonPopupExtender>
<asp:Panel ID="PanelYoutubePopup" runat="server">
<asp:Literal ID="Literal3" runat="server"></asp:Literal>
</asp:Panel>
</div>
</form>
</body>
</html>
youtube.aspx.vb
Partial Class youtube
Inherits System.Web.UI.Page
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
Literal1.Text = "<iframe width=""560"" height=""315"" src=""//www.youtube.com/embed/9i_WCKR8FrE"" frameborder=""0"" allowfullscreen></iframe>"
Literal2.Text = "<iframe width=" + """" + TextBoxWidth.Text + """" + " height=" + """" + TextBoxHeight.Text _
+ """" + " src=""//www.youtube.com/embed/" + TextBoxURL.Text + """" _
+ " frameborder=""0"" allowfullscreen></iframe>"
Literal3.Text = "<iframe width=""400"" height=""210"" src=""//www.youtube.com/embed/9i_WCKR8FrE"" frameborder=""0"" allowfullscreen></iframe>"
End Sub
End Class
Inherits System.Web.UI.Page
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
Literal1.Text = "<iframe width=""560"" height=""315"" src=""//www.youtube.com/embed/9i_WCKR8FrE"" frameborder=""0"" allowfullscreen></iframe>"
Literal2.Text = "<iframe width=" + """" + TextBoxWidth.Text + """" + " height=" + """" + TextBoxHeight.Text _
+ """" + " src=""//www.youtube.com/embed/" + TextBoxURL.Text + """" _
+ " frameborder=""0"" allowfullscreen></iframe>"
Literal3.Text = "<iframe width=""400"" height=""210"" src=""//www.youtube.com/embed/9i_WCKR8FrE"" frameborder=""0"" allowfullscreen></iframe>"
End Sub
End Class
コメント
コメントを投稿