videoPlay.html 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  6. <title>Video 示例</title>
  7. <link rel="stylesheet" href="../../css/mui.min.css" />
  8. </head>
  9. <body>
  10. <header class="mui-bar mui-bar-nav">
  11. <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
  12. <h1 class="mui-title">Video 示例</h1>
  13. </header>
  14. <div class="mui-content">
  15. <div id="videoContainer">
  16. <!--
  17. 让ios支持内联播放,必须添加 webkit-playsinline 标签
  18. -->
  19. <video webkit-playsinline id="videoMedia" controls="controls" preload width="100%" height="240">
  20. <!--<source src="http://192.168.23.1:8088/Wildlife.mp4" type='video/mp4'>-->
  21. <!--
  22. 这里用的是自己本地的视频,请换位自己本地的
  23. -->
  24. <source src="Wildlife.mp4" type='video/mp4'>
  25. <!--<source src="../../video/Wildlife.webm" type='video/webm'> -->
  26. <!--<source src="http://192.168.23.1:8088/Wildlife.mp4" type='video/mp4'>-->
  27. <!--<source src="https://media.w3.org/2010/05/sintel/trailer.mp4" type='video/mp4'>-->
  28. <!--<source src="../video/Wildlife.mp4" type='video/mp4'>
  29. <source src="../video/Wildlife.webm" type='video/webm'>-->
  30. <!--http://192.168.23.1:8088/Wildlife.mp4-->
  31. <p>浏览器不支持Html5 Video!</p>
  32. </video>
  33. </div>
  34. </div>
  35. <!--<script type="text/javascript" src="../../js/mui.min.js"></script>
  36. <script src="../../js/config.js"></script>-->
  37. <script type="text/javascript">
  38. // mui.init();
  39. // mui.plusReady(function() {
  40. // // var interface = 'http://10.10.5.166:8080/jfinal_cms/api/action/article?version=1.0.1&p=',
  41. // // url = interface + '{' + 'articleId:4264' + '}'
  42. // //接收上个界面传递的参数
  43. // window.addEventListener('playEvent', function(event) {
  44. // alert(1111);
  45. //// var title1 = mui('#newsTitle');
  46. //// var content = mui('#content');
  47. //// var time = mui('#time');
  48. //// var articleId = event.detail.articleId;
  49. //// // alert(articleId);
  50. //// var url = API.API_URL();
  51. // });
  52. //
  53. // })
  54. //
  55. // function getData(articleId) {
  56. // var url = API.API_URL();
  57. // var title1 = mui('#newsTitle');
  58. // var content = mui('#content');
  59. // var time = mui('#time');
  60. // mui.ajax(url, {
  61. // dataType: 'json', //服务器返回json格式数据
  62. // type: 'post', //HTTP请求类型
  63. // data: {
  64. // method: 'article',
  65. // p: '{articleId:' + articleId + '}'
  66. // },
  67. // timeout: 10000, //超时时间设置为10秒;
  68. // headers: {
  69. // 'Accept': 'application/json'
  70. // },
  71. // success: function(data) {
  72. // //服务器返回响应
  73. // console.log(JSON.stringify(data))
  74. // var article = data.data.article;
  75. // if(article) {
  76. // title1[0].innerHTML = article.title;
  77. // content[0].innerHTML = article.content;
  78. // time[0].innerHTML = article.publish_time;
  79. // }
  80. //
  81. // },
  82. // error: function(xhr, type, errorThrown) {
  83. // //异常处理;
  84. // console.log(type);
  85. // }
  86. // });
  87. // };
  88. </script>
  89. </body>
  90. </html>