在Windows 10 Universal App上添加Youtube嵌入视频
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了在Windows 10 Universal App上添加Youtube嵌入视频相关的知识,希望对你有一定的参考价值。
我正在尝试将YouTube视频嵌入到我的Windows 10 Universal App中。我知道有办法与YouTube上的条款相悖,但是有没有办法做到这一点并不违背它们?
我已经尝试了以下代码,并且我能够获得一个YouTube播放器。但视频无法加载。
在Initialize下
string html = @"<style> body{margin:0; padding:0;} iframe{width:100%;height:480px;}@media screen and (max-width:300px) { iframe{width:100%;height:180px;}} </style><iframe style=""padding:0px;margin-bottom:-20px;"" src=""https://www.youtube.com/embed/OLE5oAZanA4" + @" ? rel=0"" frameborder=""0"" allowfullscreen></iframe>";
videoView.NavigateToString(html);
UI代码
<WebView Name="videoView" HorizontalAlignment="Left" Height="297" Margin="466,150,0,0" Grid.Row="1" VerticalAlignment="Top" Width="441"/>
对于任何使用MyToolkit的人(违反YT条款)。使用此方法时是否仍在跟踪视图?
答案
试试这个
StringBuilder stringbuild = new StringBuilder();
stringbuild.Append("<!DOCTYPE html>");
stringbuild.Append("<html lang="en" xmlns="http://www.w3.org/1999/xhtml">");
stringbuild.Append("<head> <meta charset="utf-8"/> <title></title> </head>");
stringbuild.Append("<body>");
stringbuild.Append(" <style> iframe {border: none;}");
stringbuild.Append(" html, body {margin: 0px; padding: 0px; border: 0px; width: 100%; height: 100%; overflow:hidden;} </style>");
stringbuild.Append(" <div id="player" style="width:200px; height:400px;"></div>");
stringbuild.Append("<script>");
stringbuild.Append("var tag = document.createElement('script');");
stringbuild.Append("tag.src = "https://www.youtube.com/iframe_api";");
stringbuild.Append("var firstScriptTag = document.getElementsByTagName('script')[0];");
stringbuild.Append(" firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);");
stringbuild.Append(" function onYouTubeIframeAPIReady() {window.external.notify("YoutubePlayerLoadCompleted"); }");
stringbuild.Append(" var width; var height;");
stringbuild.Append(" function setwidth(incoming) { width = incoming; document.getElementById("player").style.width = incoming+ 'px'; }");
stringbuild.Append("function setheight(incoming) { height = incoming; document.getElementById("player").style.height = incoming +'px'; }");
stringbuild.Append("var player;");
stringbuild.Append(" function loadplayer(incomming) { player = new YT.Player('player', { height: height, width: width, playerVars: { 'fs': 1 }, videoId: incomming, events: { 'onReady': onPlayerReady, 'onStateChange': onPlayerStateChange } }); var element = document.getElementById('videoframe'); }");
stringbuild.Append("function onPlayerReady(event) { }");
stringbuild.Append("function onPlayerStateChange(event) {}");
stringbuild.Append("function play() { if (!player){} else { try { player.playVideo();} catch(err){window.external.notify(err.message);} }}");
stringbuild.Append(" function pause() { player.pauseVideo(); }");
stringbuild.Append("</script> </body> </html>");
string ts = stringbuild.ToString();
webview.NavigateToString(ts);
webview.ScriptNotify += async delegate (object sender1, NotifyEventArgs e1)
{
var jsScriptValue = e1.Value;
if (jsScriptValue.ToString().Equals("YoutubePlayerLoadCompleted"))
{
await webview.InvokeScriptAsync("setwidth", new string[] {"500" });
await webview.InvokeScriptAsync("setheight", new string[] {"400" });
await webview.InvokeScriptAsync("loadplayer", new string[] { "_P9lGTiiXW0" });
}
};
以上是关于在Windows 10 Universal App上添加Youtube嵌入视频的主要内容,如果未能解决你的问题,请参考以下文章
iOS 和 Universal WINdows App 中的屏幕密度
Windows Universal App 维护开放的 WebSocket
如何检查 Windows Universal 10 应用程序是不是已关闭而不是最小化?
Windows Universal App 8.1 自定义用户控件