1

ビデオが完了すると、img がポップアップする iPad 用のビデオ js プレーヤーをセットアップしています。全画面表示なしでこれを機能させることはできますが、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