Постер не показан в video.js

Я использую ваш video.js, который работает частично. Я имею в виду, что я скачал zipfile и разархивировал в вашу папку video-js, содержащую все файлы. Отлично, если я играю в ваш demo.html, я могу видеть это правильно в FF, хорошо. Я хочу создать веб-приложение с jquerymobile, воспроизводящим из localSD, используя ваш video.js. Итак, я установил в голове правильное местоположение, как вы предлагали указывать на локальный video-js / video.js. Я установил плакат photo.png, расположенный в той же папке video -js. Я тестировал на Android 4.0.1, и плакат только появляется, когда страница находится в переходном состоянии, затем исчезает, оставляя серый прямоугольник, но я тестировал на iPad, и он работает. Вторая проблема - флеш-плеер, потому что я не могу играть в Firefox, и ни один игрок не отображается только черным прямоугольником. Может быть, я должен установить правильный путь. Ваш video-js.swf находится в той же папке video-js, что мне нужно делать, я совсем не эксперт. Можете ли вы сказать, где я должен что-то изменить. Ниже я включаю страницу index.html со всеми настройками (имена файлов и картинки правильные на месте). Благодарю.

<!DOCTYPE html> 
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Video 1</title> 
    <link rel="stylesheet" href="css/jquery.mobile-1.3.0-beta.1.min.css" />
    <link rel="stylesheet" href="video-js/video-js.css" />
    <script src="js/jquery-1.9.0.min.js"></script>
    <script src="video-js/video.js"></script>
    <script src="js/jquery.mobile-1.3.0-beta.1.min.js"></script>
    <script>
    _V_.options.flash.swf = "video-js/video-js.swf";
  </script>
</head> 


<body> 
<!-- Home Page -pagina 1 -->
<div data-role="page" id="home"data-theme="d" data-dom-cache="true">

    <div data-role="header"data-theme="a"data-position="fixed">
        <h1>Course MC 5.x - Lesson 1</h1>
    </div><!-- /header -->

    <div data-role="content" >  
        <img src="css/images/woc1_512.png" style="width: 100%; overflow: hidden; height:auto; position: relative;"/>


            <a href="#authortips" data-role="button" data-theme="e" data-transition="flip"data-prefetch >Author's Tips</a>
            <a href="#video1"  data-role="button" data-theme="e" data-transition="flip" data-prefetch>Video 1</a>
            <a href="#video2" data-role="button" data-theme="e"  data-transition="flip" data-prefetch>Video 2</a>       

    </div><!-- /content -->
        <div data-role="footer" data-theme="a">
        <h4>Produced by - <a href="http://www.wocmultimedia.com" target="_blank">Angelo Giammarresi</a></h4>
    </div><!-- /footer -->
</div>


<!-- Author's Tips -->
<div data-role="page" id="authortips" data-theme="d"data-dom-cache="true">

    <div data-role="header"data-theme="a"data-position="fixed" >
        <h1>Course MC 5.x - Lesson 1</h1>
    </div><!-- /header -->

    <div data-role="content" >
        <p>&nbsp;</p><h1>Author's Tips</h1>

        <p><strong><em>Welcome,</em></strong></p>
<p>
Thank you for downloading this first lesson of the Course Media Composer 5.x. My name is Angelo Giammarresi, I'm film director and producer of 90 documentaries around the world, video-editing courses and so on. I set my company, World On Communications, to share my expertises and knowledge acquired since 1978 in TV and multimedia productions, as you can better know visiting <a href="http://www.wocmultimedia.com/" target="blank">www.wcmultimedia.com</a> but, let's go on with the course introduction.</p>

        </div><!-- /content -->
        <div data-role="footer" data-theme="e"data-position="fixed">
        <div data-role="navbar"data-theme="e">
        <ul>
                       <li><a href="#home" data-prefetch data-transition="flip">Home</a></li>
                       <li><a href="#authortips" data-prefetch data-transition="flip" class="ui-btn-active ui-state-persist"data-theme="e">Author's Tips</a></li>
                       <li><a href="#video1" data-prefetch data-transition="flip"  >Video 1</a></li>
                       <li><a href="#video2" data-prefetch data-transition="flip">Video 2</a></li>      
            </ul>       
     </div><!--/navbar -->      
    </div><!-- /footer -->
</div><!--fine pagina 2 authortips -->



<!-- Video 1 pagina 3-->
<div data-role="page" id="video1"data-theme="d"data-dom-cache="false">

    <div data-role="header"data-theme="a"data-position="fixed" >
        <h1>Course MC 5.x - Lesson 1</h1>
    </div><!-- /header -->

    <div data-role="content" align="center">
            <p>&nbsp;</p><h1>Video 1</h1>
        <video id="my_video_1" class="video-js vjs-default-skin" controls
  preload="auto" width="480" height="320"  poster="video-js/woc1_512.png"  data-setup="{}">
  <source src="res/part1.mp4" type='video/mp4'>
  </video>  
        </div><!-- /content -->
        <div data-role="footer" data-theme="e"data-position="fixed" >
        <div data-role="navbar"data-theme="e">
        <ul>
                       <li><a href="#home" data-prefetch data-transition="flip">Home</a></li>
                       <li><a href="#authortips" data-prefetch data-transition="flip">Author's Tips</a></li>
                       <li><a href="#video1" data-prefetch data-transition="flip" class="ui-btn-active ui-state-persist"data-theme="e" >Video 1</a></li>
                       <li><a href="#video2" data-prefetch data-transition="flip">Video 2</a></li>      
            </ul>       
     </div><!--/navbar -->      
    </div><!-- /footer -->
</div>


<!-- Video 2 pagina 4-->
<div data-role="page" id="video2"data-theme="d"data-dom-cache="false">

    <div data-role="header"data-theme="a"data-position="fixed">
        <h1>Course MC 5.x - Lesson 1</h1>
    </div><!-- /header -->

    <div data-role="content" align="center">
            <p>&nbsp;</p><h1>Video 2</h1>
        <video id="my_video_2" class="video-js vjs-default-skin" controls
  preload="auto" width="480" height="320" class="vjs-poster" poster="video-js/woc1_512.png"   data-setup="{}">
  <source src="res/part2.mp4" type='video/mp4'>
  </video>  
        </div><!-- /content -->
        <div data-role="footer" data-theme="e"data-position="fixed" >
        <div data-role="navbar"data-theme="e">
        <ul>
                       <li><a href="#home" data-prefetch data-transition="flip">Home</a></li>
                       <li><a href="#authortips" data-prefetch data-transition="flip">Author's Tips</a></li>
                       <li><a href="#video1" data-prefetch data-transition="flip"  >Video 1</a></li>
                       <li><a href="#video2" data-prefetch data-transition="flip"class="ui-btn-active ui-state-persist"data-theme="e">Video 2</a></li>      
            </ul>       
     </div><!--/navbar -->      
    </div><!-- /footer -->
</div>


</body>
</html>

0 ответов

Другие вопросы по тегам