视频验证客户端如何获取视频的持续时间

时间:2016-01-28 19:49:22

标签: javascript jquery video file-upload html5-video

我有一个程序,允许用户选择一个文件并获得视频文件的确切长度。我得到的代码得到了长度,但一旦我尝试以任何方式输出它,它输出为Nan或undefined。有原因吗?

Jquery的

$('#auto_select_vid').click( function () {
    $('#select_video').click();
});
$('#select_video').on('change', function (event) {
    var file = event.currentTarget.files[0]; 
    var objectUrl = URL.createObjectURL(file); 
    $('#test_video_player').prop('src',objectUrl);
    var seconds = $("#test_video_player")[0].duration;
    console.log($("#test_video_player")[0].duration);
    console.log($("#test_video_player"));
});

HTML:

<div id="auto_select_vid" class="button">Detect Video Info</div>
<input type="file" id="select_video" style="display:none;" />
<video id="test_video_player" style="display:none;"></video>

功能 function example

用户单击该按钮并选择一个视频文件。 Everthing触发但在控制台日志中显示为

未定义
  

的console.log($(&#34;#test_video_player&#34;)[0] .duration);

但是当在第二个控制台日志上时,可以清楚地看到持续时间。如果不能这样做,我可以使用php方法用JSON发回持续时间吗?

1 个答案:

答案 0 :(得分:1)

在访问video metadata之前,您必须确定它们已被加载:

 <?php
    include('session.php');
    ?>

    <?php
        include('connect1.php');
        $retrieve = $db->prepare("SELECT count(*) FROM Asset1");
        $retrieve->execute();
        $fetchrow = $retrieve->fetch(PDO::FETCH_NUM);
        $calculated=$fetchrow[0];
    ?>

    <script type="text/javascript">

        function UpdateCost() {
            var sum = 0;
            var gn, elem;
            for (i=0; i<<?php echo $calculated ?>; i++) {
                gn = 'sum_m_'+i;
                elem = document.getElementById(gn);
                if (elem.checked == true) { sum += Number(elem.value); }
            }
            document.getElementById('totalcost' ).value = sum.toFixed(0);
        }
        window.onload=UpdateCost

    </script>


    </div>



            <div class="cleaner"></div> 
        </div>

        <div id="templatemo_content">
            <div id="profile">
                <b id="welcome">Welcome : <i><?php echo $login_session; ?></i></b>
                <b id="logout"><a href="logout.php">Log Out</a></b>
    <center>


    Total Cost : <input type="text" name="sen" id="totalcost" value="" />


    <h2>Overview Of Assets</h2>

        <table cellpadding="0" cellspacing="0" border="0" id="table" class="sortable">
            <thead>
                <tr>


                    <th><h3>Asset ID</h3></th>  
                    <th><h3>Vendor</h3></th>
                    <th><h3>Hardware</h3></th>
                    <th><h3>Cost</h3></th>
                    <th><h3>Date Of Purchase</h3></th>

                </tr>
            </thead>
            <tbody>

            <?php
                        // include('connect1.php'); you already included this file
                $result = $db->prepare("SELECT * FROM Asset1");
                $result->bindParam(':userid', $res);
                $result->execute();
                for($i=0; $row = $result->fetch(); $i++){
                ?>

                <?php
                while 
                ?>

                <tr>

                    <td><?php echo $row['Asset_ID']; ?></td>
                    <td><?php echo $row['Vendor_Name']; ?></td>
                    <td><?php echo $row['Hardware_ID']; ?></td>
                    <td><?php echo $row['Asset_Cost']; ?></td>
                    <td><?php echo $row['DateOfPurchase']; ?></td>
                    <th><h3><INPUT TYPE="checkbox" NAME="items[]" value="<?php echo $row['Asset_Cost'] ?>" id="sum_m_<?php echo $i ?>" onclick="UpdateCost()"></h3></th>


                </tr>

                ?>
                </tbody>
                </table>



                }
            ?>

            </tbody>
      </table>
        <div id="controls">
            <div id="perpage">
                <select onchange="sorter.size(this.value)">
                <option value="5">5</option>
                    <option value="10" selected="selected">10</option>
                    <option value="20">20</option>
                    <option value="50">50</option>
                    <option value="100">100</option>
                </select>
                <span>Entries Per Page</span>
            </div>
            <div id="navigation">
                <img src="images/first.gif" width="16" height="16" alt="First Page" onclick="sorter.move(-1,true)" />
                <img src="images/previous.gif" width="16" height="16" alt="First Page" onclick="sorter.move(-1)" />
                <img src="images/next.gif" width="16" height="16" alt="First Page" onclick="sorter.move(1)" />
                <img src="images/last.gif" width="16" height="16" alt="Last Page" onclick="sorter.move(1,true)" />
            </div>
            <div id="text">Displaying Page <span id="currentpage"></span> of <span id="pagelimit"></span></div>
        </div>

        <script type="text/javascript" src="script.js"></script>
        <script type="text/javascript">
      var sorter = new TINY.table.sorter("sorter");
        sorter.head = "head";
        sorter.asc = "asc";
        sorter.desc = "desc";
        sorter.even = "evenrow";
        sorter.odd = "oddrow";
        sorter.evensel = "evenselected";
        sorter.oddsel = "oddselected";
        sorter.paginate = true;
        sorter.currentid = "currentpage";
        sorter.limitid = "pagelimit";
        sorter.init("table",1);
      </script>


    <br>
    <br>
    <input type="button" name="export" value="Export Data into Excel"onclick="window.location.href='http://mp04.bit-mp.biz/FinalPresentation/Assetexport.php'"/> 
    <br>
    <br>
    <form name="getcvs" action="reportAsset.php" method="POST" /> <input type="submit" name="submitpdf" value="Download pdf file" />


      <br>
      <br>
    <input type="button" value="Add New Asset" onclick="window.location.href='http://mp04.bit-mp.biz/FinalPresentation/AssetAdd.php'" /> <input type="button" value="Update Asset" onclick="window.location.href='http://mp04.bit-mp.biz/FinalPresentation/AssetBeforeUpdate.php'" /> <input type="button" value="Delete Asset" onclick="window.location.href='http://mp04.bit-mp.biz/FinalPresentation/AssetDelete2.php'" /> <input type="button" value="Search Asset" onclick="window.location.href='http://mp04.bit-mp.biz/FinalPresentation/Assetsearch.php'" />
    <div id="templatemo_footer">
            <ul class="footer_list">
                <li><a href="http://mp04.bit-mp.biz/FinalPresentation/profile.php" class="current">Home</a></li>
                <li><a href="http://www.orangetee.com" class="last">OrangeTee</a></li>

            </ul> 

            <div class="margin_bottom_10"></div>      
            Copyright © 2016 Asset Management System 
    </div> 


    </html>