Question

我正在尝试＆＃34;玩＃34;与html5视频应答，我遇到难以切换全屏。 src文件名用JQuery填充并且运行正常，但是当我点击全屏时，海报以全屏显示，我丢失了我的视频。这是我的代码：

<html>
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="web/css/jquery-ui.css">
    <link rel="stylesheet" href="web/css/mp4.css">
    <script src="web/js/jquery-1.11.1.js"></script>
    <script src="web/js/jquery-ui.js"></script>
</head>
<body>
    <div id="video">
        <video id='videoPlayer' controls="controls" poster="web/images/poster.jpg" width="480">
            <source id="mp4Src" src="" type='video/mp4' />
            Vidéo HTML5 n'est pas supportée par ce navigateur
        </video>        
    </div>
    <div id="accord">
        <h3 id="h0">Jurgen Kuppens</h3>
        <div>
            <table border="0" width="100%" cellspacing="0" class="prog">
                <tr>
                    <td>Jurgen Kuppens Jazz accordion on the Yamaha Tyros 4</td>
                    <td style="display:none;">jurgen.mp4</td>
                </tr>
            </table>
        </div>
        <h3 id="h1">Klaus Wunderlich</h3>
        <div>
            <table border="0" width="100%" cellspacing="0" class="prog">
                <tr>
                    <td>Klaus Wunderlich - Tico Tico</td>
                    <td style="display:none;">tico.mp4</td>
                </tr>
            </table><br>
        </div>
        <h3 id="h2">Rhoda Scott</h3>
        <div>
            <table border="0" width="100%" cellspacing="0" class="prog">
                <tr>
                    <td>Rhoda Scott joue la toccata et fugue en ré mineur de Jean Sebastien Bach</td>
                    <td style="display:none;">toccata.mp4</td>
                </tr>
            </table><br>
        </div>
    </div>
    <script>
            $( "#accord" ).accordion({
            heightStyle: "content",
            animate:false
        }).width($('body').width()-550);
        $( "#accord h3")
        .click(function(){
            $(this).parent().find('div')
            .removeClass('ui-widget-content')
            .css('max-height',($('body').height()-300)+'px');
            $('#ui-accordion-accord-panel-'+($(this).attr('id').substr(1))).scrollTop(0);
            $('.prog tr.focus').removeClass('focus');
            $('#mp4Src').attr('src',"");
            document.getElementById('videoPlayer').load();
            document.getElementById('videoPlayer').play();
        });
        $('#accord div')
        .removeClass('ui-widget-content')
        .css('max-height',($('body').height()-300)+'px');

        $(window).resize(function() {
            $('#accord').width($('body').width()-550);
            $('#accord div')
            .removeClass('ui-widget-content')
            .css('max-height',($('body').height()-300)+'px');
            $('#accord h3:eq(0)').trigger('click');
        });

        document.getElementById('videoPlayer').load();
        $('table.prog tr').click(function(){
            $('tr.focus').removeClass('focus');
            var player = document.getElementById('videoPlayer');
            player.volume = 1;
            player.pause();
            if($(this).find('td:last').text().substr(-4)=='.mp4'){
                $(this).addClass('focus');
                $('#mp4Src').attr('src', "ytb/"+$(this).find('td:last').text());
                player.load();
                player.play();
            }
        })
        .hover(
            function(){
                if($(this).find('td:last').text().substr(-4)=='.mp4'){
                    $(this).css('cursor','pointer');
                }else{
                    $(this).css('cursor','default');
                }
            },
            function(){}
        );
        $("#videoPlayer").bind("ended", function() {
            $('#mp4Src').attr('src', "");
            document.getElementById('videoPlayer').load();
            document.getElementById('videoPlayer').play();
            $('.prog tr.focus').removeClass('focus');
        });
    </script>   
</body>

我的目标是点击手风琴来查看视频是什么，以及当我点击每一行以启动视频播放器时。我希望有人可以帮助我，因为我想理解为什么不能运行。非常感谢您的帮助。

Html5视频切换全屏丢失文件名和显示海报

0 个答案: