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

Question

我正在尝试使用 'media-element-and-player' 创建一个视频元素，它是一个用于创建自定义视频播放器的插件。

当我自己创建元素时它工作正常但是当视频元素由 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 播放器？

How to dynamically create a mediaelement player using jquery and mediaelement-and-player.js?

javascript

jquery

html

mediaelement