admin管理员组文章数量:1605636
1.今天爬了很多坑，一直想给video和source 的src赋值；总是赋值不到；替大家爬了一个小时的坑，给大家瞅瞅；
步骤一 获取安卓手机或ios手机从http传过来的参数；
function urlPara2(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg);
if (r != null) return r[2];
return null;
};
console.log(urlPara2("url"))；
注意：url需为是安卓或者ios通过http带过来的参数；
全部代码显示；
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="Keywords" content="">
<meta name="Description" content="">
<!-- 移动设备支持 -->
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<meta content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"
name="viewport">
<meta content="no-cache,must-revalidate" http-equiv="Cache-Control">
<meta content="no-cache" http-equiv="pragma">
<meta content="0" http-equiv="expires">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta content="telephone=no, address=no" name="format-detection">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/pxtorem.css">
<link rel="stylesheet" type="text/css" media="screen" href="css/style.css">
<link rel="stylesheet" href="css/mediaelementplayer.css" />
<style>
html,
body {
height: 100%;
}
#wrap {
height: 100%;
}
.mejs-container,
.video,
.mejs-poster,
.mejs-overlay,
.mejs-mediaelement,
video {
height: 100% !important;
width: 16rem !important;
}
</style>
<script src="js/jquery.min.js"></script>
<script src="js/fastclick.js"></script>
<script src="js/pxtorem.js"></script>
<script src="js/mediaelement-and-player.min.js"></script>
<script src="https://cdn.staticfile/vue/2.2.2/vue.min.js"></script>
<script type="text/javascript" src="https://res.wx.qq/open/js/jweixin-1.2.0.js"></script>
</head>
<body>
<div id="wrap" class="bgColor">
<div class="clr over video" id="video2">
<video :src="url" type="video/mp4" ref='video' id="player1" loop="loop" :poster="img" controls="controls"
preload="ture"></video>
</div>
</div>
<script>
new Vue({
el: '#video2',
data: {
img: '',
url: "",
canplay: true,
},
methods: {
urlPara2(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg);
if (r != null) return r[2];
return null;
},
},
mounted() {
this.url = this.urlPara2('url');
this.img = this.urlPara2('img')
console.log(this.img)
document.addEventListener('WeixinJSBridgeReady', function () {
document.getElementById('player1').play();
}, false);
},
})
</script>
</body>
</html>
需要其他详细代码联系我
微博：艾米的猫儿
趁时光不老，努力活成自己想要的样子 笑看过往
QQ/微信:731335498
github：https://github/qiqi-zhang/video
版权声明：本文标题：仿抖音H5手机播放器 （爬坑） 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/dianzi/1728486980a1160272.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论