将YouTube Iframe API与Nativescript一起使用? [英] Use YouTube Iframe API with Nativescript?
问题描述
更新:通过下面@Manoj的代码和其他一些来源，我现在能够将YouTube播放器加载到基于Youtube iframe api的网络视图中.但是问题仍然是:当视频本身开始播放时，如何让我的应用识别? (在视频加载之后和任何广告播放之后).
UPDATE: From @Manoj's code below and some other sources, I am now able to load the youtube player into a webview based on the Youtube iframe api. But the question still is: how can I have my app recognize when the video itself starts playing? (after the video loads, and after any ad plays).
关键代码被捕获"在Web视图中.
The key code is "trapped" in the webview.
有一个nativescript-webview接口插件，旨在让您从webview获取信息.如果这是这里所需要的，那么当视频本身开始播放时，使用该插件注册的正确代码是什么?
There is a nativescript-webview interface plugin that is meant to allow you to get information from the webview. If that is what is required here, what would be the correct code with that plugin to register when the video itself starts playing?
该插件回购中的示例似乎非常具体，与我在这里想到的有所不同.
The examples on that plugin's repo seem pretty specific and different than what I have in mind here.
原始问题:
我有一个使用iOS和Angular的Nativescript应用.我想在应用程序中播放youtube视频，并且希望能够控制播放.因此，我想做一些事情，例如以编程方式自动播放视频并在视频实际播放时进行注册.
I have a Nativescript app using iOS and Angular. I would like to have youtube videos play in the app, and I want to be able to control the playback. So I want to do things like autoplay it programmatically and register when the video is actually playing.
我该怎么做?
更多详细信息:
有一个nativescript-youtubeplayer插件，但我不能在这里使用，因为它需要api键和其他一些原因.
There is a nativescript-youtubeplayer plugin but i am not able to use that here, bc it requires an api key and some other reasons.
我能够使用以下代码将基本iframe嵌入到WebView中:
I am able to embed a basic iframe into a WebView, with code like this:
<WebView (loaded)="onWebViewLoaded($event)" requiresUserActionForMediaPlayback="false" [src]="urlSource"></WebView>
和在ts中:
public urlSource= '<iframe src="https://www.youtube.com/embed/ZwO3PG-c5Cs?playsinline=1&autoplay=1&fs=0&controls=1&enablejsapi=1"></iframe>'
这将加载视频.但是它没有普通的youtube控件(例如视频上没有大的暂停按钮)，也许被webview覆盖了.更重要的是，它不会不能自动播放，并且它不会没有给我一种以编程方式访问iframe信息的方式，因此，例如，我无法确定何时视频实际上是在播放还是在暂停时播放.
This loads the video. But it does not have the normal youtube controls (like no big pause button on the video)--maybe bc its overridden by the webview. More importantly, it does NOT autoplay, and it does not give me a way to programmatically access the iframe info--so, for example, I am not able to tell when the video is actually playing vs when it is paused.
Youtube Iframe Player API 是为此目的而制作的，但是我该怎么做与Nativescript一起使用吗?它似乎需要以我以前从未见过的Nativescript方式进行dom操作.
The Youtube Iframe Player API is made for this purpose, but how do I use it with Nativescript? It seems to require dom manipulation in a way that I have not seen Nativescript do before.
例如，其基本代码为:
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'M7lc1UVf-VE',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
但是，毫不奇怪，这会带来错误，例如找不到名称YT".
But, unsurprisingly, this brings up errors, like 'can't find name YT'.
那么，如何将youtube视频嵌入到带有iframe的Nativescript中，并像拥有Web应用程序一样控制它呢?
So, how can I embed a youtube video in Nativescript with iframe and control it like I could if I had a web application?
推荐答案
您可以在WebView中使用YouTubeIframeAPI，创建一个单独的可以保存脚本的本地html文件.
You may use YouTubeIframeAPI within WebView, create a separate local html file that can hold the scripts.
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<body>
<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<div id="player"></div>
<script>
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
width: '100%',
videoId: 'M7lc1UVf-VE',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
event.target.playVideo();
}
// 5. The API calls this function when the player's state changes.
// The function indicates that when playing a video (state=1),
// the player should play for six seconds and then stop.
var done = false;
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !done) {
setTimeout(stopVideo, 6000);
done = true;
}
}
function stopVideo() {
player.stopVideo();
}
</script>
</body>
</html>
注意:您甚至可以在查询字符串中传递videoId或任何其他参数，然后在html文件中进行解析和使用.
Note: You may even pass the videoId or any other parameter in query string, then parse and use the same within the html file.
这篇关于将YouTube Iframe API与Nativescript一起使用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
