HTML-тег видео не работает в Iphone / Ipad - PullRequest
0 голосов
/ 11 декабря 2019

Пожалуйста, найдите ниже мой код (он работает в Android Mobile, но не в IPhone): я использую тег HTML5 в моем коде, который работает в Android Mobile, но в Iphone он не работает. Я написал код для сканирования QR-кода с мобильного устройства, и мой код работает нормально. Я также пытался из приложения Salesforce1 там также не работает тег видео, но в браузере Chrome он работает.

<head>
    <title>QR Scanner</title>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript" src="{!$Resource.QRCode}"></script>

</head>
<body align="center">
    <apex:form >
        <apex:pageBlock ><br />
            <p>
               Dealer/Retailer:  
            </p>
            <apex:inputField id="retailer" value="{! qr.Retailer_Details_Name__c }" required="true" /><br />
        </apex:pageBlock>
    <div style="padding:10px 0px">
        <h1 style="font-size:30px;">Scan QR code</h1>
    </div>  

    <div style="margin-left:10%; margin-bottom:30px" id="gg">
        <div style="float:left; margin-top:5px; margin-bottom:0px; ">
            <img src="" id="imm" width="100" height="100" />
        </div>
        <div style="float:left; margin-left:15px; text-align:left">
            <p style="font-weight:bold;font-size:15px;">Format: <span style="font-weight:300; font-size:12px;">QR_CODE</span> </p>
            <p style="font-weight:bold;font-size:15px">Type: <span style="font-weight:300; font-size:12px">TEXT</span> </p>
            <p style="font-weight:bold;font-size:16px">Time: <span style="font-weight:300; font-size:12px" id="dt"></span></p>
        </div>
    </div>
    <br/>      
    <div style="margin:0px 10% 10% 10% ;">

        <video id="video" width="280" poster="poster.jpg" src="movie.m4v" href="movie.m4v" type="video/x-m4v" target="myself" scale="1" > </video>

    </div>

    <div id="text" style="padding-top:45px; font-weight:bold; color:grey;"> </div>

    <div style= "margin:10px 0px">
        <button id="btn">SCAN</button>
    </div>    

    <script type="text/javascript"> 
    ScanQR();

    d = Date.now();
    d = new Date(d);
    d = (d.getDate()<10?'0':'')+ d.getDate()+'/'+((d.getMonth() + 1) < 10 ? '0' : '')+(d.getMonth()+1)+'/'+d.getFullYear()+' '+(d.getHours() > 12 ? d.getHours() - 12 : d.getHours())+':'+d.getMinutes()+' '+(d.getHours() >= 12 ? "PM" : "AM");

    $("#gg").hide();
    $("#btn").hide();


    $("#btn").click(function(){
        $('#video').show(); 
        ScanQR();   

        $("#btn").hide();
        $("#text").hide();
        $("#gg").hide();

    });

    function ScanQR(){
        Instascan.Camera.getCameras().then(function (cameras) { 
            if (cameras.length > 0) { 
                scanner.start(cameras[1]); 
            } else { 
                console.error('No cameras found.'); 
            } 
        })
        .catch(function (e) { 
            console.error(e); 
        });

        let scanner = new Instascan.Scanner({ video: document.getElementById('video'), mirror: false, captureImage: true });
        scanner.addListener('scan', function (content, image) {
            $("#imm").attr("src",image);
            $("#text").text(content);
            $("[id*='redeem']").val(content);
            $('#video').hide();
            scanner .stop();
            $("#gg").show();
            $("#text").show(); 
            $("#dt").text(d); 
            $("#btn").show();

        });
    }   
    </script>

    <apex:pageMessages />
        <apex:pageBlock >
            <apex:inputText id="redeem" value="{! qr.QR_Code__c }" />
            <apex:commandButton action="{!savedata}" value="Save" />
            <apex:commandButton value="Cancel" action="{!doCancel}" immediate="true"/>
        </apex:pageBlock>
    </apex:form>

</body>

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...