jQuery根据一天中的时间更改视频海报

亚伦

我正在尝试根据一天中的时间更改视频的发布者,但是它不起作用,似乎什么也没做,也没有抛出任何错误。

<video width="100%" poster="/poster.jpg"  id="videoPlayer" controls>
<source src="1.ogv" type='video/ogg; codecs="theora, vorbis"'/>
<source src="1.webm" type="video/webm" >    
<source src="1.mp4" type="video/mp4">     
</video>

jQuery代码

$( document ).ready(function() {
function posterImageTime() {
            var d = new Date();
            var n = d.getHours();
            switch(true) {
                case (n > 19) :
                    //Night
                    posterImage = 'night.jpg';
                    break;
                case (n > 16 && n < 19) :
                    //Sunset
                    posterImage = 'sunset.jpg';
                    break;
                default:
                    //Day
                    posterImage = 'day.jpg';
            }
            document.getElementById("#videoPlayer").poster = posterImage;
            //$('#videoPlayer').attr('poster' , posterImage)
        }

});
wrxsti

这可能是因为您仅在document.ready中定义了函数。尝试在ready之外定义函数,然后在ready内调用该函数:DEMO

function posterImageTime() {
    var d = new Date();
    var n = d.getHours();
    switch(true) {
        case (n > 19) :
            //Night
            posterImage = 'night.jpg';
            break;
        case (n > 16 && n < 19) :
            //Sunset
            posterImage = 'sunset.jpg';
            break;
        default:
            //Day
            posterImage = 'day.jpg';
    }
    document.getElementById("#videoPlayer").poster = posterImage;
    //$('#videoPlayer').attr('poster' , posterImage)
}

$( document ).ready(function() {
    posterImageTime();
});

旁注

不要#在getElementById中包含document.getElementById("videoPlayer")就足够了。

在分配变量值之前声明变量也是一种很好的形式。你应该声明posterImage是这样的:var posterImage = null;你之前switch的语句。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章