Question

我在wordpress项目中有一个小型的自定义视频播放器，到目前为止，当我仅使用一种文件格式（mp4）时，它运行良好。但是我现在也必须使用webm，并且在使javascript代码正常工作时遇到了问题。

<?php while( have_rows('v') ): the_row(); 
    // vars
    $mp4 = get_sub_field('id_mp4');
    $webm = get_sub_field('id_webm');
?>

<a class="play-video" data-src="<?php echo $mp4; ?>" data-webm="<?php echo $webm; ?>">VIDEO TITLE</a>

<?php endwhile; ?>

这是目标视频部分：

<video width="100%" height="auto" controls="true" class="video">
    <source src="<?php echo $mp4; ?>" type="video/mp4">
    <source src="<?php echo $webm; ?>" type="video/webm">
    Your browser does not support the video tag.
</video>

这是我的JS代码：

$(document).on('click', '.play-video', function() {
    $('#video-viewer video').attr('src', $(this).data('src'));
    $('#video-viewer video')[1].attr('src', $(this).data('webm')); // Not working
    $("#video-viewer video")[0].autoplay = true;

});

有人可以帮助我将webm数据src加载到正确的部分吗？

在html5视频源中加载多个data-src（mp4 + webm）

0 个答案: