Question

我正在为iPad设置一个视频js播放器，在视频完成后，会弹出一个img。我能够在没有全屏的情况下工作，但iPad用户往往只想在观看视频时使用全屏。因此，我试图弄清楚如何在视频完成时将img内容推送到全屏帧内，而不必退出全屏以查看图像。这可能吗？

这是我到目前为止的代码：

<link href='http://fonts.googleapis.com/css?family=Petit+Formal+Script' rel='stylesheet'         type='text/css'>

<style type="text/css">

body {
background-color: #EAEAEA;  
}
.style2 {font-size: 24px}
div#showdiv {
        background-image:url('BackGround.png');
        width:800px; 
        height:446px;
}
textarea#tweet {
                background:transparent;
            border:transparent; 
            float:left; 
                font-weight: bold;
                font-size:170%;
                margin-left:100px;
                margin-right:100px;
                margin-top:30px;
                width:600px;
                height:600px;
                opacity:0.7;
                color:660000;
                font-family: 'Petit Formal Script', cursive;
}
</style></head>

<body>
<div id = "okaydiv"></div>

<div align="center">
      <p>
    <div id = "showdiv" style="display:none" align="center">
        <p>
            <textarea cols="50" rows="5" id="tweet" >this is the text over     image</textarea>
        </p>
</div>
<video id='myVideo' align="center" class='video-js 
    vjs-default-skin' preload='auto' data-setup='{}' 
    poster='thumb.png' width='800' height='446' controls autobuffer>
<source src='vid.mp4' type='video/mp4'l></source>
    <source src='vid.ogg' type='video/ogg'></source>
    <source src='vid.webm' type='video/webm'>


</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>

    <script type='text/javascript'>
    var toggleFx = function() {
    $.fx.off = !$.fx.off;
    };
    toggleFx();

    document.getElementById('myVideo').addEventListener('ended',myHandler,false);

    function myHandler(e) {
        if(!e) { e = window.event; }
        // What you want to do after the event
        $("#myVideo").toggle("slow");
        $("#showdiv").toggle("slow");
        //document.getElementById('okaydiv').innerHTML = "<img src = 'cleanscreen.png'/>";
    }
</script>
</body>
</html>

Answer 1

鉴于当iPad用户按下全屏按钮时，视频文件随后会在本机iOS视频播放器中打开，您无法在该播放器内部自动弹出“弹出”图像因为你不再在网络浏览器中了。

不幸的是，当涉及到他们自己的原生应用程序时，iOS已经被锁定了，所以我认为你不能在视频结尾处提示事件以关闭ipad或iphone上的全屏，但如果你当用户关闭全屏模式（即关闭原生视频播放器）时，你看到图像正在显示，然后另一种选择可能是创建一些一致性并插入现在在网站上显示的图像正在播放的视频的最后一帧。这样，当用户返回浏览器时，他们会看到熟悉的东西。

将内容放入iPad中的视频Js全屏框架中

1 个答案: