解决微信端手机视频播放兼容性问题

   <script type="text/javascript">
//mp4是ios、android普遍支持的格式
function playVideo(opt) {
  var _this = this;
  _this.elemt = opt.elemt; //播放器要插入的对象
  _this.src = opt.src; //视频的URL(必设)
  _this.width = opt.width > 0 ? opt.width + "px" : "100%"; //宽度(默认100%)
  _this.height = opt.height > 0 ? opt.height + "px" : "400"; //高度(默认100%)
  _this.autoplay = opt.autoplay == "true" ? "autoplay" : ""; //自动播放(true为自动播放)
  _this.poster = opt.poster; //视频封面,播放时的封面图片
  _this.preload = opt.preload == "true" ? "preload" : ""; //预加载(true时启动加载)
  _this.loop = opt.loop == "true" ? "loop" : ""; //循环播放(true时循环播放)
  var str = "<video id=‘playVideo‘ controls "; //根据设置的属性的值,拼写video控件
  str += " width=‘" + _this.width + "‘ height=‘" + _this.height + "‘ "
      + _this.autoplay + " " + _this.preload + " " + _this.loop + " ";
  if (typeof (_this.poster) != "undefined") {
    str += " poster=‘" + _this.poster + "‘ >";
  } else {
    str += " > ";
  }
  str += " <source src=‘" + _this.src + "‘ />";
  str += "</video>";
  this.elemt.innerHTML = str; //将str放到要插入的对象中
}
playVideo( {
  //所有参数,elemt和src为必填其他看需求怎么要求
  //elemt为播放控件要插入的容器,src为视频文件地址,preload为预加载,autoplay是否页面进入就自动播放
  //poster为播放前的遮照图片,loop为是否循环播放,width和heigth默认100%
  elemt : document.getElementById("divVideo"),
  src : "${url}",
  preload : "true",
  autoplay : "true",
  poster : "",
  loop : "true",
  width : "",
  heigth : "400px"
});
</script>
时间: 2025-01-31 00:30:49

解决微信端手机视频播放兼容性问题的相关文章

如何解决微信端直接跳WAP端

现在几乎所有人都使用微信APP,而且对于要做推广的人,所有的产品几乎都离不开微信的推广,然而腾讯会维护微信生态圈,都不会自动跳转到你推广的链接上,通常都会出现下面的提示,那要怎样实现在微信内置浏览器里打开指定页面,那就需要使用微信跳WAP来实现.原理很简单,只需要在跳转平台创建一条落地页URL,获取一条超链接即可,创建后分配给你一个可以唤起微信的超链接,获取到的超链接放到你网站即可.猴子数据微信跳WAP 接口,能微信环境下自动切换,过渡中间的环节,直接跳转到推广的接口,这种接口大多用于淘宝客等各

完美解决微信端设置title失败问题

document.setTitle = function(t) { document.title = t; var i = document.createElement('iframe'); i.src = '/favicon.ico'; i.style.display = 'none'; i.onload = function() { setTimeout(function(){ i.remove(); }, 0) } document.body.appendChild(i); } setTi

移动端在ios上以及微信浏览器上的兼容性

1.document.以及window.body在移动h5不能触发点击事件 解决方法:给body加上cursor: pointer;就可以有点击事件了. ios上默认的body是没有点击事件的: 接着在微信端又不能打开了.那么需要在js里面加上以下代码 $('body>*').bind('click',function){ aler(); } 原文地址:https://www.cnblogs.com/MrQinjj/p/12102510.html

ios为了用户隐私安全,禁止自动播放音频文件的解决办法(微信端)

ios为了用户隐私安全,禁止自动播放音频文件 //通过参数给音频设置id和路径 utils = { playAudio: function (id, src) { var audio = $('#' + id); if (audio.attr('src') == undefined) { audio.attr('src', src); } //audio[0].play(); function audioAutoPlay() { audio[0].play(); document.addEven

安卓微信端打开H5页面背景图被键盘挤压移动位置解决

问题:在微信端(安卓浏览器也如此)打开的H5登录页面中,点击输入信息,弹出软键盘会挤压背景图片. 本来的body宽高设置body{width:100%,height:100%},不起作用,这样写就会导致键盘弹出的时候html和body的高度从原来的100%变为(100%-键盘高度).所以要再强行把高度调整回去. 未调整前:背景被挤压,导致下部出现空白背景 调整后: 插入js代码调整高度 1 $(document).ready(function () { $('body').css({'heigh

解决微信内嵌浏览器无法响应上传文件(图片)的思路(2种办法)

进园一年多来,第一次写博客,好激动.原因主要是自己平时都是有写笔记,不习惯写博客,这次想写博客的原因是,这个问题确实我做了很久,已经做了近两周才解决了这个问题,,而且两周时间里尝试过了很多种办法,然后由于网上又没有多少人分享这个,决定自己写一下. 先自我介绍下,我是惠州学院大二(准大三)的学生,在去年暑假时候加了一个工作室开始写代码,也是在那个时候加入博客园,最近因为工作室要做微信端网页的开发需要一个上传图片功能,然后编码的时候发现用平时的方法做的上传功能在Android的微信端上实现不了,百度

2015下半年移动端手机网站优化要点

前几天在我博客分享了一下怎么做移动端网站的开放适配以及如何禁止百度对网站进行转码,希望给各位站长带来一些帮助.经过很多站长的反应得知,其实还有很多人不知道该如何做移动端网站的基础建设,不知道如何设计一个移动端网站,今天我来根据做太原雅辉装修公司手机站的经验来分享一下:2015年移动端手机网站优化要点. 1.手机站定位和页面设计 手机站和PC站除了页面大小.展现形式不一样之外,在分析用户需求方面是都要做的.举个例子,对于一个本地的装修网站来讲,PC站是重点展现装修效果图案例.装修报价以及公司的装修

7种方法解决移动端Retina屏幕1px边框问题

在Reina(视网膜)屏幕的手机上,使用CSS设置的1px的边框实际会比视觉稿粗很多.在之前的项目中,UI告诉我说我们移动项目中的边框全部都变粗了,UI把他的设计稿跟我的屏幕截图跟我看,居然真的不一样.没有办法,只有在后面的版本中去修改了,但是要改的话,需要知道是为什么.所以查了很多资料,终于搞懂了这个问题,并且总结了几种方法. 造成边框变粗的原因 其实这个原因很简单,因为css中的1px并不等于移动设备的1px,这些由于不同的手机有不同的像素密度.在window对象中有一个devicePixe

jqm视频播放器,html5视频播放器,html5音乐播放器,html5播放器,video开发demo,html5视频播放示例,html5手机视频播放器

最近在论坛中看到了很多实用html5开发视频播放,音乐播放的功能,大部分都在寻找答案.因此我就在这里做一个demo,供大家相互学习.html5开发越来越流行了,而对于视频这一块也是必不可少的一部分.如何让你的网站占据优势,就要看你的功能和用户体验了.html5对video还是做了很多优惠的东西,我们使用起来很得心应手. 在过去 flash 是网页上最好的解决视频的方法,截至到目前还算是主流,像那些优酷之类的视频网站.虾米那样的在线音乐网站,仍然使用 flash 来提供播放服务.但是这种状况将会随