javascript - 如何为 JavaScript 函数设置变量来嵌入视频？

Question

我有一个像这样的网格:

<div class="main">
    <ul id="og-grid" class="og-grid">
        <li>
            <a href="http://..." data-video="my-url"  data-largesrc="images/1.jpg" data-title="Title" data-description="Description">
                <img src="images/thumbs/1.jpg" alt="img01"/>
            </a>
        </li>
    </ul>
</div>

data-video 参数是一个 url，在 JavaScript 中我不知道如何正确创建此函数:

Preview.prototype = {
 create : function() {
    this.$title = $( '<h3></h3>' );
    this.$description = $( '<p></p>' );     
    this.$href = $( '<a href="#">Visit website</a>' );
    this.$details = $( '<div class="og-details"></div>' ).append( this.$title, this.$description, this.$href );
    this.$loading = $( '<div class="og-loading"></div>' );
    this.$fullimage = $( '<div class="og-fullimg"></div>' ).append( this.$loading );            
    this.$videosrc = $( '<iframe class="og-video" width="560" height="315" src="data-video" frameborder="0" allowfullscreen></iframe>' ).append( this.$loading );
    this.$closePreview = $( '<span class="og-close"></span>' );
    this.$previewInner = $( '<div class="og-expander-inner"></div>' ).append( this.$closePreview, this.$videosrc, this.$details );
    this.$previewEl = $( '<div class="og-expander"></div>' ).append( this.$previewInner );
    this.$item.append( this.getEl() );
    if( support ) {
        this.setTransition();
    }
}

如何在声明 src 的 JavaScript 的 this.$videosrc 中调用 html 文件的数据视频 URL？

Answer 1

如果您使用 jQuery，您可以通过以下方式获取数据视频值:

var video_src  = $('[data-video]').attr('data-video');

如果您仅使用 JavaScript，请为链接提供一个 ID，例如 video_1 和

var video_src = document.getElementById("video_1").getAttribute("data-video");

您可以在初始化对象属性时将其传递到 Preview 对象中，或者稍后在另一个方法/函数中设置它。

    this.$videosrc = $( '<iframe class="og-video" width="560" height="315" src='+ video_src +' frameborder="0" allowfullscreen></iframe>' ).append( this.$loading );