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>

数据视频参数是一个网址，在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();
    }
}

如何在声明this.$videosrc的此JavaScript的src内调用我的html文件的数据视频网址？

Answer 1

如果您使用的是jQuery，您可以使用以下内容获取数据视频值：

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

如果您只使用JavaScript，请为该链接指定一个ID为video_1和

的ID

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 );

Answer 2

您使用jquery .data()方法：

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

如果我正确理解您的方法，那么有一个this.getEl()方法可以返回对数据视频参数所在元素的引用，并且上面的代码应该有效。 ;是的。

如何设置JavaScript函数的变量来嵌入视频？

2 个答案: