您需要登录后才可以操作登录 | 立即注册
关闭
楼主
京京
  • TA的每日心情
    开心
    2016-9-27 09:25
  • 签到天数: 85 天

    连续签到: 1 天

    [LV.6]常住居民II

    [干货分享] 分享一个H5 video标签播放网页视频代码   [复制链接]

    45862 22 发表于 2014-9-19 11:18:03

    本帖最后由 京京 于 2014-12-11 10:44 编辑

    page5.html 页面
    1. <!DOCTYPE html>
    2. <html class="um landscape min-width-240px min-width-320px min-width-480px min-width-768px min-width-1024px">
    3.     <head>
    4.         <title></title>
    5.         <meta charset="utf-8">
    6.         <meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1, user-scalable=yes, minimum-scale=1.0, maximum-scale=3.0">
    7.     <link rel="stylesheet" href="css/ui-btn.css">
    8.         <link rel="stylesheet" href="css/ui-base.css">
    9.         <link rel="stylesheet" href="css/ui-box.css">
    10.         <link rel="stylesheet" href="css/ui-color.css">
    11.                 <link rel="stylesheet" href="css/ui-res.css">
    12.         <script src="js/zy_control1.js">
    13.         </script>
    14.         <script src="js/zy_click.js">
    15.         </script>
    16.         <script>
    17.         </script>
    18.     </head>
    19.     <body class="um-vp c-wh" ontouchstart>
    20.         <div id="page_0" class="up ub ub-ver" tabindex="0">
    21.             <!--header开始-->
    22.             <div id="header" class="uh c-org c-m1 t-wh ub">
    23.                     
    24.                 <!--<h1 class="ut ub-f1 ulev0 ut-s tx-c" tabindex="0">窗口5</h1>
    25.                                 <div class="umw4" ontouchstart="zy_touch()" onclick="">
    26.                  </div>
    27.                                          
    28.                                  -->
    29.                         <div id="video-wrapper" style="width:100%" height="200px">
    30.                    <video poster="http://media.w3.org/2010/05/sintel/poster.png"  controls="controls" controls="controls"   preload="metadata" loop="loop"autoplay="autoplay" width="  100%" height=" "name="media"><source src="http://media.w3.org/2010/05/sintel/trailer.ogv" type="video/ogg;codecs="theora,vorbis"" media="screen" /><source src="http://media.w3.org/2010/05/sintel/trailer.mp4"  />
    31.                                    </video>
    32.                   </div>
    33.            </div>
    34.             <!--header结束--><!--content开始-->
    35.             <div id="content" class="ub-f1 tx-l t-bla ub-img6 res10">
    36.                
    37.             </div>
    38.             <!--content结束--><!--footer开始-->
    39.             <div id="footer" class="uf c-m2 c-bla t-wh">
    40.                     <div class="umw4" ontouchstart="zy_touch()" onclick="">
    41.                <!--按钮开始-->
    42. <div class="btn btn-l btn-a ub ub-ac " onclick="goback();">      
    43.               <div class="ulim">返回</div>      
    44.           </div>
    45. <!--按钮结束-->  
    46.                     </div>
    47.                 <h1 class="ut ulev-2 tx-c" tabindex="0">(c) Copyright 3G2WIN and others 2011.
    48.                     <br>
    49.                     All rights reserved.
    50.                 </h1>
    51.             </div>
    52.             <!--footer结束-->
    53.         </div>  
    54.     </body>
    55.                
    56.     <script>
    57.             zy_init();
    58.         window.uexOnload = function(type){
    59.             if (!type) {
    60.                 zy_con("content", "page5_content.html", 0, $("header").offsetHeight);
    61.             }
    62.                         window.onorientationchange=window.onresize=function()
    63.                         {
    64.                                 zy_resize("content",0,$("header").offsetHeight);                                
    65.                         }
    66.         }
    67.                 function goback(){
    68.                         uexWindow.close('-1');
    69.                 }
    70.                 // <script>
    71.    // document.getElementById('video-wrapper').webkitRequestFullscreen();

    72.     </script>
    73. </html>
    复制代码

    page5_content.html
    1. <!DOCTYPE html>
    2. <html class="um landscape min-width-240px min-width-320px min-width-480px min-width-768px min-width-1024px">
    3.     <head>
    4.         <title></title>
    5.         <meta charset="utf-8">
    6.         <meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1, user-scalable=yes, minimum-scale=1.0, maximum-scale=3.0">
    7.       <link rel="stylesheet" href="css/ui-input.css">
    8.     <link rel="stylesheet" href="css/ui-res.css">
    9.     <link rel="stylesheet" href="css/ui-btn.css">
    10.     <link rel="stylesheet" href="css/ui-base.css">
    11.     <link rel="stylesheet" href="css/ui-box.css">
    12.     <link rel="stylesheet" href="css/ui-color.css">
    13.         <script src="../js/zy_control.js">
    14.         </script>
    15.         <script src="../js/zy_click.js">
    16.         </script>
    17.         <script src="../js/zy_tmpl.js">
    18.         </script>
    19.         <script src="../js/main.js">
    20.         </script>
    21.         <script src='../js/zy_slide.js'>
    22.         </script>
    23.     </head>
    24.     <body class="um-vp" ontouchstart>
    25.             我是窗口4的,向下向上刷新<br/>测试主窗口和浮动窗口同时支持缩放,打开浮动窗口zy_control1必须加上128才能支持缩放;open主窗口inFlag=128换成4//标记被open的window无论是否已存在都将强行刷新页面。/8//标记被open的window当中的任何url都将调用系统浏览打开。<br/>
    26.                                         <div ontouchstart="zy_touch('btn-act')" onclick="openwind();" class="btn uba b-bla uinn5 c-blu c-m1 uc-a t-wh">打开窗口6:淡入淡出效果</div>
    27.                         
    28.         
    29.     </body>

    30.     <script>
    31.         zy_init();
    32.         window.uexOnload = function(){
    33.                         if (!type) {
    34.                                 initBounce(function(){
    35.                                         // 顶端向下滑动
    36.                                         dorpDownUpdate();
    37.                                 }, function(){
    38.                                         // 底部向上滑动
    39.                                         pullUpUpdate();
    40.                                 });
    41.                         }
    42.             //传感器的实时变化值
    43.             //setPageBounce(dorpDownUpdate, pullUpUpdate);
    44.         }
    45.         function dorpDownUpdate(){
    46.            // alert('drop down update success');
    47.            // uexWindow.resetBounceView('0');
    48.                     setTimeout(function(){
    49.                         uexWindow.resetBounceView(0);
    50.                 }, 800);
    51.         }

    52.         function pullUpUpdate(){
    53.             alert('pull up update success');
    54.             uexWindow.resetBounceView('1');
    55.         }

    56.         function initBounce(downcb, upcb){
    57.                                 var top = 0,btm = 1;
    58.         if(!funcTop && !funcBottom){
    59.             uexWindow.notifyBounceEvent(btm,0);
    60.             uexWindow.notifyBounceEvent(top,0);        
    61.             uexWindow.hiddenBounceView(0);
    62.             uexWindow.hiddenBounceView(1);
    63.             return;
    64.         }
    65.             uexWindow.setBounce("1");
    66.             //var s = ['0', '0'];
    67.             uexWindow.onBounceStateChange = function(type, status){
    68.                 if (downcb && type == 0 && status == 2)
    69.                     downcb();
    70.                 if (upcb && type == 1 && status == 2)
    71.                     upcb();
    72.             }
    73.                
    74.             if (downcb) {
    75.                              uexWindow.showBounceView(top,"rgba(255,255,255,0)",1);
    76.             uexWindow.notifyBounceEvent(top,1);        
    77.             var json="{'pullToReloadText':'拖动刷新','releaseToReloadText':'释放刷新','loadingText':'刷新中,请稍等'}"
    78.            //     s[0] = '1';
    79.                 uexWindow.setBounceParams("0",  json);
    80.               //  uexWindow.notifyBounceEvent("0", "1");
    81.             }
    82.             if (upcb) {
    83.                 s[1] = '1';
    84.                 uexWindow.setBounceParams("1", {
    85.                     "imagePath": "res://loading.png",
    86.                     "textColor": "#000",
    87.                     "levelText": "**",
    88.                     "pullToReloadText": "上拉刷新",
    89.                     "releaseToReloadText": "释放刷新",
    90.                     "loadingText": "加载中,请稍等"
    91.                 });
    92.                 uexWindow.notifyBounceEvent("1", "1");
    93.             }
    94.             uexWindow.showBounceView("0", "#FFF", s[0]);
    95.             uexWindow.showBounceView("1", "#FFF", s[1]);
    96.         }
    97.                          function openwind(){
    98.          uexWindow.open("qqshare",0,"qqshare.html",5,"","",0,3600);
    99.          uex.cWiondowFlagEnableScale= 128;
    100.          
    101. }
    102.     </script>
    103. </html>
    复制代码

    video标签 需要硬件加速的支持,目前APPCAN的应用不支持硬件加速,所以video播放没有图像。后续会做支持。

    沙发
    京京
  • TA的每日心情
    开心
    2016-9-27 09:25
  • 签到天数: 85 天

    连续签到: 1 天

    [LV.6]常住居民II

    显示全部楼层 发表于 2014-9-19 11:20:56
    自己做的页面在ipad上的截图:界面UI根据自己的样式来调节
    IMG_0011.PNG

    板凳
    jackywine
  • TA的每日心情
    开心
    2014-10-24 10:08
  • 签到天数: 63 天

    连续签到: 1 天

    [LV.6]常住居民II

    显示全部楼层 发表于 2014-9-21 15:23:03
    挺好的,谢谢分享
    地板
    gepsy
  • TA的每日心情

    2014-12-17 18:17
  • 签到天数: 43 天

    连续签到: 1 天

    [LV.5]常住居民I

    来自手机 显示全部楼层 发表于 2014-10-27 22:28:51
    优酷视频也可以这么播放吗?
    5#
    京京
  • TA的每日心情
    开心
    2016-9-27 09:25
  • 签到天数: 85 天

    连续签到: 1 天

    [LV.6]常住居民II

    显示全部楼层 发表于 2014-10-30 10:19:47
    gepsy 发表于 2014-10-27 22:28
    优酷视频也可以这么播放吗?

    应该看video标签支持都什么网页视频了,
    6#
    gepsy
  • TA的每日心情

    2014-12-17 18:17
  • 签到天数: 43 天

    连续签到: 1 天

    [LV.5]常住居民I

    显示全部楼层 发表于 2014-10-31 18:09:44
    京京 发表于 2014-10-30 10:19
    应该看video标签支持都什么网页视频了,

    video标签支持列表播放吗?
    7#
    京京
  • TA的每日心情
    开心
    2016-9-27 09:25
  • 签到天数: 85 天

    连续签到: 1 天

    [LV.6]常住居民II

    显示全部楼层 发表于 2014-11-3 09:46:14
    只是一个html5 video标签,标记语言,通过webview渲染出来,列表播放需要代码二次开发应该可以这个功能应该比较强大;也可以一个video标签一个列表形式,表现出来
    8#
    嘉兴蜂鸟网络
  • TA的每日心情
    擦汗
    2014-11-2 13:04
  • 签到天数: 52 天

    连续签到: 1 天

    [LV.5]常住居民I

    显示全部楼层 发表于 2014-11-20 22:16:53
    你这个会不会自己全屏 最近也在做类似项目 不点不播放 一点就全屏 郁闷
    9#
    京京
  • TA的每日心情
    开心
    2016-9-27 09:25
  • 签到天数: 85 天

    连续签到: 1 天

    [LV.6]常住居民II

    显示全部楼层 发表于 2014-11-26 09:37:08
    本帖最后由 京京 于 2014-12-2 14:33 编辑

    video标签需要看手机系统版本,高版本系统的手机貌似会对video标签兼容比较好,比如安卓会存在有声音无图像的那种情况,那是因为video需要全屏播放,在高版本系统下可能会兼容好一点直接在页面中不需要全屏播放,像搜狐那样应用,应该不止是使用video标签,或者是集成的播放器之类的,纯属使用video标签想播放视频的页面,目前安卓只能全屏播放.....PS:做视频应用的,而且纯粹使用video标签播放的安卓应用应该知道这个小缺陷
    10#
    lunhui10

    该用户从未签到

    显示全部楼层 发表于 2014-11-27 22:54:46
    请问怎么让您给的源码运行起来?
    主题:
    级别:游客
    发帖:
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    快速回复 返回顶部 返回列表