1

我正在为 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>
4

1 回答 1

1

鉴于当 iPad 用户按下全屏按钮时，视频文件会在原生 iOS 视频播放器中打开，您将无法在该播放器内部单独“弹出”图像“不再在网络浏览器中。

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

于 2012-12-19T19:45:13.930 回答