Question

我正在尝试建立一个有视频版块的网站。我遇到的问题是，为了更改“.video-player”中的视频。我需要将数据库中的数据（视频名称）从我的index.php文件传递到我的scriptz.js文件。

我到目前为止尝试的是在div中回显这些数据并使用javascript中的document.getElementbyId检索它，这似乎不起作用。这是代码

INDEX.php

<ul class="video-list">
<?php
while($videotemp=mysql_fetch_array($ris))
{
?>
    <li class="video-element">
        <div class="image-duration">
            <img class="video-thumbnails" src="images/<?php echo $videotemp["thumbnails"] ;?>"/>
            <p class="duration"><?php echo number_format($videotemp["duration"]/100,0);?>:<?php echo $duration2=$videotemp["duration"]%100; ?></p>
        </div>
        <p class="video-title"><?php echo $videotemp["author"];?> - <?php echo $videotemp["name"] ;?></p>
        <div id="source"><?php echo $videotemp["source"]  ?></div>
    </li>
<?php   
}
?>
</ul>

<video id="video-player"  preload="auto" data-setup="{}"  controls  >
    <source id="mp4" src="" type="video/mp4" />
    <source id="ogv" src="" type="video/ogv" />
    <source id="webm" src="" type="video/webm" />
</video>

Cese.css

#source{
visibility:hidden;
}

Scriptz.js

$('.video-element').click(function(){
        var $videosource=document.getElementById("source");

            document.getElementById('mp4').setAttribute('src','videos/'+$videosource + ".mp4");
            document.getElementById('ogv').setAttribute('src','videos/'+$videosource + ".ogv");
            document.getElementById('webm').setAttribute('src','videos/'+$videosource + ".webm");
            $("#video-box")[0].load();

    });

任何建议，提前谢谢。

Answer 1

添加innerHTML。

您希望ID内的字符串不是ID本身。

所以：var $ videosource = document.getElementById（＆＃34; source＆＃34;）。innerHTML;

Answer 2

您需要查看XMLHttpRequests

您可以将这些用于jQuery.ajax，如下所示：

您可以创建一个PHP页面并将其格式化为JSON，然后返回视频所需的数据。

以下是一个示例：https://jsfiddle.net/ianjamieson/dcz4jed3/2/

$(document).ready(function() {
    $('[data-videoId]').on('click', function() {
    $.ajax({
        type: 'GET',
        url: '/echo/json/', // this would be your data.php page
      data: { // this is like adding ?videoId=1234 to data.php
        videoId: $(this).data('videoId')
      },
      dataType: 'json',
      success: function(json) {
        // json will now contain your video information
        console.log(json);
      }
    });
  });
});


/*
    data.php would need to use PHP function:
  json_encode($phpArray);
*/

尝试将.php文件中的数据传递到.js文件

2 个答案: