你好,欢迎访问远方教程PC版!
广告位招租
网站首页 >> HTML入门 >> HTML5教程 >> 文章内容

html5智能手机播放的视频代码

[日期:2015-08-11]   来源:远方教程  作者:远方教程   阅读:6565次[字体: ] 访问[旧版]
 捐赠远方教程 

  一些网页会有视频的嵌套窗口,在电脑上可以播放,但是在手机上打开这个网页,视频那里就会显示“插件不支持”的类似画面。

  代码要怎样写才能实现既能在电脑上播放又可以在手机上播放呢?

HTML5

  没错,使用html5就可以实现。但是你会问并不是所有的浏览器都支持html5啊,怎么办?

  没事,我们可是使用折冲的方法对浏览器进行判断。如果是电脑的浏览器,我们还是使用以前的代码;如果是手机的浏览器。我们就使用html5。因为现在的智能手机的浏览器一般都支持html5的了。其实不支持html5的好像就ie9以下的浏览器了。

  其中有一步骤很关键:就像为了使网页能播放flv格式视频而要在IIS添加MIME类型那样需要在IIS增加对应的MIME类型。

html5智能手机播放的视频代码-远方教程

html5智能手机播放的视频代码-远方教程

  下面来看看具体代码怎样写。

视频嵌套界面:

<div class="left">
    <iframe id="rightPic" style="border:0;" scrolling="no" src="right.html" ></iframe>
    <iframe id="rightPic2" style="width:234px;height:180px; border:0;margin-left:-6px;margin-top:-8px; display:none;"
     scrolling="no" class="left" src="video.htm" ></iframe>
</div>

判断浏览器:

<script type="text/javascript">
     //------------判断浏览器-----------
     var Sys = {};
     var ua = navigator.userAgent.toLowerCase();
     var s;     (s = ua.match(/msie ([\d.]+)/)) ? Sys.ie = s[1] :
          (s = ua.match(/firefox\/([\d.]+)/)) ? Sys.firefox = s[1] :
          (s = ua.match(/chrome\/([\d.]+)/)) ? Sys.chrome = s[1] :
          (s = ua.match(/opera.([\d.]+)/)) ? Sys.opera = s[1] :
          (s = ua.match(/version\/([\d.]+).*safari/)) ? Sys.safari = s[1] : 0;
       //------------判断浏览器-----------
     $(function () {
           $("#marquee").kxbdMarquee();
           try {
               if (Sys.ie.toString() == "6.0") {
                 //$("#mainRight").css("padding-left", "7");
                 $("#middlelogo div").attr("class", "left");
                 $("#rightlogo").css({ "width": "233", "margin-left": "3" });
                 $("#rightlogo div").attr("class", "left rightlogo");
                 $("#rightlogo img").css("width", "233"); 
                 $("#rightlogo div:first").attr("class", "left");
                 $("#rightPic").css({ "src": "right2.html", "width": "233", "margin-left": "0" });
                 $("#bottomlogo img").css("width", "796").attr("class", "left");
               }
               else {
               }
           }
           catch (e) { }
           try {
               if (ua.indexOf('android') > -1 || ua.indexOf('linux') > -1) {
                   $("#rightPic").css("display", "none");
                   $("#rightPic2").css("display", "");
               }
           }
           catch (e) { }
       });  
</script>

right.html文件:

复制代码
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en"  "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=gb2312" />
    <title></title>
    <!--<link rel="stylesheet" type="text/css" href="css/default.css">    -->
    <!--<script type="text/javascript" src="js/slide.js"></script>-->
</head>
<body style="border: 0px; margin: 0; padding: 0px;">
 

<div id="bigpicarea" style="width:300px;height:180px;overflow:hidden ;" >

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"   codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="240" height="180">

<param name="movie" value="vcastr22.swf"/>

<param name="quality" value="high"/> 
<param name="allowFullScreen" value="true" />

<param name="FlashVars" value="vcastr_file=MPEG.flv&IsAutoPlay=1" />

<embed src="vcastr22.swf" allowFullScreen="true" FlashVars="vcastr_file=MPEG.flv&IsAutoPlay=1"  quality="high"  pluginspage="http://www.macromedia.com/go/getflashplayer"  type="application/x-shockwave-flash" width="240" height="180"></embed>

</object>
 
</div>
</body>
</html>

video.htm文件:

复制代码
<!DOCTYPE html> 
<html> 
<head> 

<title>Html5 video</title> 

</head> 
<body>         
    <div style="margin-top:-40px; margin-left:-7px;"> 
        <video controls="controls" autoplay="autoplay" width="240" height="220" style="margin-top:-40px;">
          <source src="CQ.mp4" type="video/mp4" />            Your browser does not support the video tag.          </video>
    </div> 
</body>   
</html> 
图片展示
 
相关评论
站长推荐