I'm using your video.js which is working in part. I mean that I downloaded the zipfile and unzipped in your folder video-js containing all files. Perfect, if I play your demo.html I can see it correctly in FF ok. I want create a webapp with jquerymobile playing from localSD using your video.js So, I set in the head the correct location as you suggested pointing to local video-js/video.js I set a poster photo.png located in same folder video-js. I tested on Android 4.0.1 and the poster just appears while the page is in transition then disappears leaving a grey rectangle but I tested on an iPad and it works. The second problem is the flash player because I cannot play in firefox and no player is shown only a black rectangle. It could be maybe I have to set the correct path. Your video-js.swf is in the same folder video-js what do I have to do, I'm not expert at all. Can you tell where do I have to change something. Below I include the index.html page with all settings (filenames and pictures are correct on place). Thanks.
<!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> </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> </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> </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>
