仿抖音H5手机播放器 (爬坑)

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.org/vue/2.2.2/vue.min.js"></script>

    <script type="text/javascript" src="https://res.wx.qq.com/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.com/qiqi-zhang/video

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值