能在手机播放的视频代码

本文转载自： https://www.cnblogs.com/vinsonlu/p/4103188.html 作者：vinsonLu 转载请注明该声明。

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

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

HTML5

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

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

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

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

视频嵌套界面：

        <divclass="left"><iframeid="rightPic"style="border:0;"scrolling="no"src="right.html" ></iframe><iframeid="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>

判断浏览器：

<scripttype="text/javascript">//------------判断浏览器-----------varSys={};varua=navigator.userAgent.toLowerCase();vars;(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">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head><metahttp-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>
<bodystyle="border: 0px; margin: 0; padding: 0px;"><divid="bigpicarea"style="width:300px;height:180px;overflow:hidden ;" ><objectclassid="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"><paramname="movie"value="vcastr22.swf"/><paramname="quality"value="high"/>
<paramname="allowFullScreen"value="true" /><paramname="FlashVars"value="vcastr_file=MPEG.flv&IsAutoPlay=1" /><embedsrc="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>         <divstyle="margin-top:-40px; margin-left:-7px;"> <videocontrols="controls"autoplay="autoplay"width="240"height="220"style="margin-top:-40px;"><sourcesrc="CQ.mp4"type="video/mp4" />Your browser does not support the video tag.</video></div>
</body>
</html>

能在手机播放的视频代码相关推荐

html5播放mp4视频代码
1.nginx支持flv和mp4格式播放默认yum安装nginx centos7安装nginx时候应该是默认安装nginx_mod_h264_streaming模块的 # nginx -V查看是否安 ...
兔子NB播放器（不用配置网上邻居，手机播放电脑视频）
不知道怎么运营,已经不维护了. 急需合伙人.请加我. 功能:使用手机或者电视盒子播放PC上的视频文件 (我厌倦了配置电脑上组件家庭网络,配置IP什么的,故自己写了这个软件) (无需配置电脑环 ...
H5外包团队:使用HTML5播放短视频代码分享
滑动代码 1 /** 2 * 滑动处理 3 */ 4 function Touch() { 5 this.init(); 6 } 7 Touch.fn = Touch.prototype; 8 Tou ...
解决部分Android手机播放MP4视频外音是杂音的问题，耳机播放正常
问题:用Android设备播放几段MP4文件,有的可以正常播放,有的播放的时候外音的声音有问题,但是带上耳机是正常的.IOS手机一切正常. 原因: 对于有些视频,用手机的扬声器播放有杂音,但是用耳机播 ...
能在手机播放的Flash代码
有些使用Flash的广告图片变换代码在手机不支持,在网上搜到了一个解决的方法: Flash嵌入处: <iframestyle="width:474px;height:276px; bo ...
视频播放器是如何播放音视频的？
当我们用手机或者电脑打开一个电影视频或者一首音频歌曲的时候,不论是在线流量还是离线本地播放,通常设备上的音视频播放器都可以将音视频文件中的画面和声音给到我们的视觉和听觉器官,这是我们习以为常的东西.但 ...
Web端 Html5 直接播放 .ts 视频
常见方案在网上查找的大部分解决方案都是用诸如videojs等网页播放器,接收 .m3u8索引文件的方式来播放ts切片.这种方案的缺点是需要后端对原始ts切片做处理,生成 .m3u8索引文件 ffmp ...
优酷html代码手机不支持,使用 iframe 引用优酷和土豆和腾讯视频，支持 HTML5 手机播放...
写博客,只为记录项目中碰到的问题使用百度视频上传,嵌入远程链接,然后在编辑器中自动转换为支持视频播放的html代码. 例如: 简单了修改了百度编辑器源码默认的百度编辑器针对视频的处理有2种: 1. ...
手机影音第十一天，显示视频缓冲，显示卡顿时的网速，播放系统视频时调用播放器的选择...
代码已经托管到码云,有兴趣的小伙伴可以下载看看 https://git.oschina.net/joy_yuan/MobilePlayer 一.设置视频缓冲进度显示视频播放进度的效果图如下:灰色的是 ...

能在手机播放的视频代码

能在手机播放的视频代码相关推荐

最新文章

热门文章