【问题标题】:Playing a featured video on hover在悬停时播放精选视频
【发布时间】:2015-03-11 16:17:50
【问题描述】:

我需要一个选项让我的 wordpress 页面在悬停时播放精选视频(就像精选图片一样),当鼠标离开容器以停止视频时。

类似于此链接的内容,只是不是在文本悬停上,而是在视频容器悬停上。

`http://jsfiddle.net/pNbYq/4/`

我需要制作没有声音选项的视频播放。这样你的右上边缘就有一个小图标来激活声音。

对我来说最好的解决方案是,如果有人可以在 www.vine.co 上制作类似的东西,那么该播放器就是完美的。

我想在我的网站上使用相同的选项。

我希望有人可以帮助我。干杯:)

【问题讨论】:

    标签: jquery jquery-plugins wordpress wordpress-theming


    【解决方案1】:

    试试这个。 http://jsfiddle.net/pNbYq/146/

    <div id="video-holder">
        <div id="video1-container">
            <video id="video1" muted>
                <source src="http://www.w3schools.com/html/movie.ogg" type="video/ogg">
            </video>
            <div class="volume-controller" id="audio-ctrl"> <i class="fa fa-volume-up" id="volume-on"></i>
     <i class="fa fa-volume-off" id="volume-off"></i>
    
            </div>
        </div>
        <video id="video2">
            <source src="http://www.w3schools.com/html/movie.ogg" type="video/ogg">
        </video>
        <video id="video3">
            <source src="http://www.w3schools.com/html/movie.ogg" type="video/ogg">
        </video>
    </div>
    <div id="button-holder">    <a data-video="video1">Video 1</a>
        <a data-video="video2">Video 2</a>
        <a data-video="video3">Video 3</a>
    
    </div>
    
    $('#audio-ctrl').click(function () {
        var sound = $('#video1').prop('muted');
        if (sound) {
            $('#video1').prop('muted', false);
            $('#volume-off').hide();
            $('#volume-on').show();
        } else {
            $('#video1').prop('muted', true);
            $('#volume-on').hide();
            $('#volume-off').show();
        }
    });
    
    $('#video1-container').on('mouseover', function () {
        $('#video1').get(0).play();
    });
    $('#video1-container').on('mouseout', function () {
        $('#video1').get(0).pause();
    });
    
    #video2, #video3 {
        display:none;
    }
    a:hover {
        cursor:pointer;
    }
    .volume-controller {
        width: 24px;
        height: 24px;
        position: absolute;
        color: #fff;
        top: 10px;
        left: 10px;
    }
    #volume-on {
        display: none;
    }
    

    【讨论】:

    • 谢谢我的朋友,差不多了,鼠标悬停在上面可以静音,这样你需要点击图标播放声音,那就太好了,谢谢你对我帮助很大。
    猜你喜欢
    • 1970-01-01
    • 2018-11-27
    • 1970-01-01
    • 1970-01-01
    • 2020-07-22
    • 2018-10-01
    • 1970-01-01
    • 2016-06-03
    • 1970-01-01
    相关资源
    最近更新 更多