Question

我正在尝试使用“媒体元素和播放器”来创建视频元素，该媒体元素是用于创建自定义视频播放器的插件。

当我自己创建元素时，它工作正常，但是当JQuery动态创建视频元素时，它不起作用。

<html>
<head>
<script src="jquery.min.js"></script>
</head>
<body>
<div class="video-preview">
</div>
<script type="text/javascript">
var div = $('.video-preview');
var video = '<video class="mejs__player" preload="true"><source 
type="video/mp4" src="batman.mp4"></video>';
div.append(video);
</script>
</body>
</html>

如何实现？并预先感谢！

Answer 1

这应该可以解决问题：

<html>
<head>
<script src="/path/to/jquery.js"></script>
<script src="/path/to/mediaelement-and-player.min.js"></script>
<!-- Add any other renderers you need; see Use Renderers for more information -->
<link rel="stylesheet" href="/path/to/mediaelementplayer.min.css" />
</head>
<body>
<div class="video-preview">
</div>
<script type="text/javascript">
    var div = $('.video-preview');
    var video = '<video class="mejs__player" preload="true"><source type="video/mp4" src="batman.mp4"></video>';
    div.append(video);
    // After adding dynamically new video element, you should initialize the mediaelement plugin on that node as when the page loads this isn't rendered
    $('.video-preview video').mediaelementplayer({
        pluginPath: "/path/to/shims/",
        success: function(mediaElement, originalNode, instance) {
            // do things
        }
    });
</script>
</body>
</html>

如何使用jquery和mediaelement-and-player.js动态创建mediaelement播放器？

1 个答案: