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

 

実装

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
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


YouTube 埋め込みプレーヤーとプレーヤーのパラメータ - YouTube — Google Developers
https://developers.google.com/youtube/player_parameters?hl=ja

 

実際の動き

1ページフルにあるところはちょっと重い。

ASP.NETでYoutube動画をポップアップに埋め込む

 

サンプル

上は固定サイズで表示、中央はテキストボックスに入れた Youtube Video ID とテキストボックスに入れた縦横サイズで表示、下は Youtube Popup をクリックで固定サイズをポップアップ内に表示。
01

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>

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

コメント

コメントを投稿

このブログの人気の投稿

ダブルクォーテーションで括られたCSVカ​ンマ区切りテキストファイルを SQL Server で Bulk Insert する方法

イメージ
  ダブルクォーテーションで括られたCSVファイルなんて使うのかよ？と私は疑問符なんだけれど、そういうファイルを吐き出すシステムもあるらしいのでメモ。 区切り文字にカンマ[,]を使用しちゃって、データにカンマ[,]が含まれちゃってるから、ダブルクォーテーションで括るしかないんだって。タブで区切ればいいと思うんだけどね。データにタブって普通入らないでしょ。データにダブルクォーテーションが入っててもNGだし。   ポイント 最初の区切り文字を、"にする 最初の列は切り捨てる 2番目以降の区切り文字を","にする 最後の区切り文字を"\r\nにする "はエスケープが必要なので"\になる。 区切り文字は""で囲む インポートする CSVファイルの文字コードは ANSIにしておく。インポートする文字コードがUNICODEだとインポートできない。 ※設定誤りでインポートできていない可能性もあるので、インポートできるかもしれない。 フォーマットファイルの文字コードは ANSI でなければいけない。UNICODEだと「XML の解析: 行 2、文字 0。ドキュメントの構文が正しくありません。」エラーになる。 フォーマットファイルの最終後は改行が必要。改行なしだと「一括読み込みできません。ファイル "C:\Users\****\Desktop\MovieStars.fmt" が不完全か、読み取れませんでした。オペレーティング システム エラー コード (null)。」となる。  
Read more »

PowerShellでTSV／CSVの列を絞り込んで抽出し、（先頭／行末）からＮ行出力する

イメージ
目的 何十万行のCSVやTSVをPowerBI DesktopやSQL Server SSISで読み込むのですが、不要な列があったり、データ量が多いので、開発時はデータを少なくしたい。 Windows標準機能で実施したい。 やること ２つにわけて記載 Powershellで（TSV／CSV）ファイル（S-JIS）から必要な列のみを取り出して、（先頭／末尾）からN行とりだして、別な（TSV／CSV）ファイルへ出力 1について以下を実装 抽出するカラム指定をパラメータ化 区切り文字をパラメータ化 （先頭／末尾）とN行をパラメータ化 対象ファイルをスクリプトへドラッグドロップで実行 対象ファイルと同一フォルダ内へファイル名の末尾に「_Result」を追記して保存） 処理対象ファイル 今回のサンプルはTSVファイルは下図のような9列。 PersonID、adult name、profile_path、biography、homepage、birthday、deathday、place_of_birth サンプル１の基本処理内容 1行目 import-csvで読み込む -Encoding Default でS-JIS指定 -Delimiter "`t"　で区切り文字としてタブを指定 -header @(1..9)　でTSVのヘッダーとして1,2,3・・・,8,9を追加 select "1","3"　で列名（4で追加）が1、３を抽出 export-csv　で「TMDbPersons_Select.txt」に出力 2行目 get-content　で1で作成したTSVを参照 -totalcount　で先頭から10行抽出 select -skip 2　で先頭から2行をスキップ foreach {$_.Replace('"','')}　で「"」を削除 out-file　で「TMDbPersons_Result.txt」に出力 サンプル１（列位置で指定する） import-csv C:\Users\aaat\Desktop\TMDbPersons.txt -Encoding Default -Delimiter "`t" -header @(1..9
続きを読む

IKEAの鏡を壁に取り付ける

イメージ
IKEAの壁掛け鏡 LINDBYN リンドビーンミラーをなるべく壁に傷を残さないように取り付けました。 IKEAの鏡は下記です。 商品番号 904.937.00 重さ4.72kg 税込3,999円 LINDBYN リンドビーン ミラー, ホワイト, 40x130 cm – IKEA   取り付けには壁美人を使用します。 壁側金具「6K」 2枚セット ホワイト / 壁美人.net ホッチキスで壁収納を実現する『壁美人』専門店 (kabebijin.net) 過去に壁美人を使ってホワイトボードを壁に掛けました。 娘の部屋＆おれの部屋に壁掛けホワイトボードを設置しMicrofost Lens ＋ OneDrive で運用してみる。 (yunogotoshi.blogspot.com) IKEA店舗（立川店）では安全のためか、微動だにせずがっちり壁に固定された状態で取り付けられていたため、またWebでも裏面の写真が掲載されていないため、フックをかける部分の大きさ、形状がわからず、購入に躊躇しました。店員さんにお願いして外してもらい、裏面を確認すると、壁美人のフックにかかりそう。そこで購入。 鏡裏面のフック形状はは下図となります。 壁にビスを刺してそこへ引っ掛け、微調整ることを想定しているのか、階段状になっています。 いつものように壁美人をホッチキスで壁に取り付けます。 今回は二つ使います。メーカー仕様によると、静止耐荷重は一つで最大6kgなので12kgの静止耐荷重となります。鏡が4.72kgなので余裕でしょう。フックの間隔は中心点で335mmとなります。 フックとなる壁美人は鏡で見えなくなりますが、化粧カバーを取り付けました。 こんな感じです。 壁美人のフックに引っ掛けるため、上部が少し浮くので、中央部と下部にスペーサーを貼り付けました。 このスペーサーの裏面はテープになっているので取り付けが簡単です。Amazonなどでクッションテープで検索すると出てくるでしょう。 ※私が使用しているのはホームセンターで購入したもので、巻取り型のタイプではありません。 スペーサーを貼ることで、やや傾斜も出ることから、足を長く見せることも可能かもしれません・・・ 取り付けた上部です。 中部から下部です。上部よりやや浮いているので、傾
続きを読む