个人中心
gpt4 book ai didi

javascript - YouTube 视频播放完毕后未关闭

转载 作者：塔克拉玛干 更新时间：2023-11-02 08:58:47 24 4
gpt4 key购买 nike

我目前正在 -UIwebView 中加载 YouTube 视频，它运行良好，视频开始自动播放。但问题是，一旦视频在 -UIwebView 中结束，它就会停止并显示播放按钮。但是，我希望视频播放器关闭，这样用户就不必每次都手动点击“完成”按钮。

Image of the screen when the video doesn't close.

这是我在 -UIwebview

中启动视频的链接 
NSString *youTubeVideoHTML = [NSString stringWithFormat:@"<!DOCTYPE html><html><head>
<style>body{margin:0px 0px 0px 0px;}</style></head> <body> <div id=\"player\"></div> <script>

    var tag = document.createElement('script'); tag.src = \"http://www.youtube.com/player_api\";
    var firstScriptTag = document.getElementsByTagName('script')[0]; 
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    var player;

    function onYouTubePlayerAPIReady() { 
        player = new YT.Player('player', { 
            width:'320',
            height:'200',
            videoId:'%@',
            events: {
                'onReady': onPlayerReady,
            }
        });
    }

    function onPlayerReady(event) { 
        event.target.playVideo();
    }

</script> </body> </html>", [[NSUserDefaults standardUserDefaults]
objectForKey:@"detailVideoURL"]];

编辑:

我尝试在我的代码中实现第一个答案，结果是这样的。我仍然不确定我应该在回调中添加什么？

NSString *youTubeVideoHTML = [NSString stringWithFormat:@"<!DOCTYPE html><html><head><style>body{margin:0px 0px 0px 0px;}</style></head> <body> <div id=\"player\"></div> <script>
var tag = document.createElement('script'); tag.src = \"http://www.youtube.com/player_api\"; 
var firstScriptTag = document.getElementsByTagName('script')[0]; 
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); var player; 

    function onYouTubePlayerAPIReady() {
     player = new YT.Player('player', {
     width:'320',
     height:'200',
     videoId:'%@',
     events: { 
    'onReady': onPlayerReady, 
    } 
    }); 
} 
function onPlayerReady(event) { 
event.target.playVideo(); 
} 

function onPlayerStateChange(event) {
  if (event.data == YT.PlayerState.PLAYING && !done) {
      setTimeout(stopVideo, 6000);  done = true; 
   } 

 if (event.data == YT.PlayerState.ENDED) {
 window.location = "callback:nil"; }; }

   function stopVideo() { 
 player.stopVideo();  

} 

</script> </body> </html>", [[NSUserDefaults standardUserDefaults] objectForKey:@"detailVideoURL"];

错误图片:http://gyazo.com/31da955d8af98f40b82789a7f60c1edb

最佳答案

您可以通过使用 youtube api 从 javascript 调用您的目标函数来实现.

在 HTML/Javascript 端

<html>
    <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 = "http://www.youtube.com/player_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 onYouTubePlayerAPIReady() {
                player = new YT.Player('player', {
                                       height: '300',
                                       width: '250',
                                       videoId: 'GUdYebAN-Fs',
                                       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) {
                 event.target.destroy();

                if (event.data == YT.PlayerState.PLAYING && !done) {
                    setTimeout(stopVideo, 60000);


                    done = true;
                }
                if (event.data == YT.PlayerState.ENDED) {

                      event.target.destroy();//to close the video
                      window.location = "callback:anything"; //here's the key
                };
            }
            function stopVideo() {
                player.stopVideo();
            }
            </script>
    </body>
</html>

onStateChange - 来自谷歌的 API 引用页面

只要玩家的状态发生变化，就会触发此事件。 API 传递给您的事件监听器函数的事件对象的数据属性将指定一个与新播放器状态相对应的整数。

因此在 javascript 函数中，您将能够跟踪视频时间的结束。然后就
在进入状态结束条件时添加event.target.destroy()

在 native /iOS 端:

甚至您也可以通过使用 webview 委托(delegate)方法捕获回调方法来执行 native 操作。

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {


    if ( [[[request URL] scheme] isEqualToString:@"callback"] ) {

       //Video has ended up playing,you can perform native stuff here...

        return NO;
    }

    return YES;
}

注意:请确保在您的设备中测试此代码，因为有时模拟器不支持。

祝你好运...希望对您有所帮助...

关于javascript - YouTube 视频播放完毕后未关闭，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18185875/

24 4 0
文章推荐： ios - 为什么我的 MFMailComposeViewController 实例只关闭一次？
文章推荐： java - 导入 com.google.android.gms.* 时出错；
文章推荐： android - ActionBarActivityDelegate 类问题......应用程序无法运行
文章推荐： ios - db executeUpdate... 在 FMDB block 中并且没有结束，没有错误
塔克拉玛干
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com