Question

好的，基本上我的代码是关于在HTML5视频标签中播放视频（让我们将其命名为简介），因此在介绍结束时，视频会停止，并且有两个不可见的div作为按钮，每个div都是可点击的，点击后，它应该只用一些动画来改变视频的来源。一切正常，直到第二个视频播放，然后稍微改回其源到第一个视频（介绍），介绍播放，但不是像它应该停止，最后视频开始无休止地重复。这是代码。

＆＃13;

$(document).ready(function () {

var vid1 = "media/Dance001.mp4";
var vid2 = "media/Dance001.mp4";
var vidsrc;
var supportedFlag = $.keyframe.isSupported();
$.keyframe.debug = true;
    $.keyframe.define({
    name: 'blackout',
    '0%': {'background-color: transparent': 'transparent'},
    '50%': {'background-color': 'black'},
    '100%': {'background-color': 'transparent'}
});

function blackOut() {
    $("#blackout1").css("display", "initial");
    $("#blackout1").playKeyframe({
    name: 'blackout', // name of the keyframe you want to bind to the selected element
    duration: '2s', // [optional, default: 0, in ms] how long you want it to last in milliseconds
    timingFunction: 'linear', // [optional, default: ease] specifies the speed curve of the animation
    delay: '0s', //[optional, default: 0s]  how long you want to wait before the animation starts
    iterationCount: '1', //[optional, default:1]  how many times you want the animation to repeat
    direction: 'normal', //[optional, default: 'normal']  which direction you want the frames to flow
    fillMode: 'forwards', //[optional, default: 'forward']  how to apply the styles outside the animation time, default value is forwards
    complete: function(){$("#blackout1").css("display", "none");} //[optional] Function fired after the animation is complete. If repeat is infinite, the function will be fired every time the animation is restarted.
});
}
function changeVideo(path){
    vidsrc = path;
    setTimeout(function() {
    $("#myVideo").attr("src", path);
    $("#left-click").css("display", "none");
    $("#right-click").css("display", "none");
    },1000)
    }
    
function changetoIntro(){
        if(vidsrc == vid1 || vidsrc == vid2) {
    $("#myVideo").on('ended',function(){
        blackOut();
        setTimeout(function() {
        $("#myVideo").attr("src", "media/Intro.mp4");
        $("#left-click").css("display", "initial");
        $("#right-click").css("display", "initial");},1000);
        vidsrc = ""; }); 
    } 
    else {} 
    }
    
$("#left-click").click(function () {
    blackOut();
    changeVideo("media/Dance001.mp4");
    changetoIntro();
    });

$("#right-click").click(function () {
    blackOut();
    changeVideo("media/Dance002.mp4");
    changetoIntro();
    });
        
});

＆＃13;

<body>

<div class = "container">
    <div id = "video-container" class = "video-container">
        <video id = "myVideo" class = "myVideo" width="800" height="850" autoplay>
            <source src="media/Intro.mp4" type="video/mp4">
            Your browser does not support the video tag.
        </video>
        <div id = "left-click" style="cursor: pointer"></div>
        <div id = "right-click" style="cursor: pointer"></div>
        <div id = "blackout1" class = "blackout1"></div>
    </div>
</div>


<script src='scripts/jquery.keyframes.min.js'></script>
<script src="scripts/scripts.js"></script>

</body>

jQuery视频无限循环

0 个答案: