Question

我需要更改视频src（这部分可以工作），当播放新视频时，将src属性设置为上一个视频，但是我无法检测新视频播放时间是否更改了src属性。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Increasing clinical relevance in oral radiology through computer-based examination?</title>    
<script src="https://code.createjs.com/easeljs-0.8.2.min.js"></script>    
<script>
  function init() {
    var canvas = document.getElementById("canvas");
    var stage = new createjs.Stage(canvas);
    stage.enableMouseOver();
    createjs.Touch.enable( stage );
    img = new Image();
    img.src = 'images/radiograph.png';
    img.onload = function(event) {
        var bitmap = new createjs.Bitmap('images/radiograph.png');
        bitmap.x = 50;
        bitmap.y = 80;
        bitmap.on("click", handleMouseEvent);
        stage.addChild(bitmap);
        stage.update();
    }

    fieldIm  = new Image();
    fieldIm.src = 'images/field.png';
    var field;
    fieldIm.onload = function(event) {
        field = new createjs.Bitmap('images/field.png');
        field.scaleX=0.9;
        field.scaleY=0.9;
        field.x=400;
        field.y=100;
        field.visible = false;
        stage.addChild(field);
        stage.update();
    }

    crossIm  = new Image();
    crossIm.src = 'images/cross.png';
    var cross;
    crossIm.onload = function(event) {
        cross = new createjs.Bitmap('images/cross.png');
        cross.scaleX=0.5;
        cross.scaleY=0.5;
        cross.zIndex = 500;
        cross.visible = false;
        stage.addChild(cross);
        stage.update();
    }
    stage.update();

    function handleMouseEvent(evt) {
            cross.x = evt.rawX - 12;
            cross.y = evt.rawY - 12;
            cross.visible = true;
            stage.update();
    }

    var rect = new createjs.Rectangle(0, 0, 180, 30);
    var frg = '#FFFFFF';
    var bkg = '#000000';

    var container = new createjs.Container();
    container.x = 450;
    container.y = 500;
    var rectShape = new createjs.Shape();
    rectShape.graphics.c().f(bkg).dr(0, 0, rect.width, rect.height);
    var text = new createjs.Text("Check Result", "30px Arial", "#FFFFFF");
    container.addChild(rectShape);
    container.addChild(text);
    container.on("click", handleToggle);
    stage.addChild(container);
    stage.update();

    function handleToggle(evt) {
            field.visible = !field.visible;
            if (field.visible) {
                text.text="Hide Result";
            } else {
                text.text="Check Result";
            }
            stage.update();
    }

    stage.update();

  }


</script>    
</head>    
<body onload="init()">
    <H1>Poster ICDMFR 2017 Clickable task example</H1>
    <canvas id="canvas" width="800" height="600"></canvas>
</body>    
</html>

Answer 1

首先，您需要在更改之前保存当前的src属性。

var previous_src= video.getAttribute('src');

然后添加ended event Listener来检测视频结尾并添加所需的流程。

document.getElementById('video').addEventListener('ended',function(){
    .....
}, false);

然后在上面的函数中添加您要执行的过程：

video.setAttribute('src',previous_src); //重置之前的src

this.load();   //load the video element

请参阅my jsfiddle。

播放一次后更改视频

1 个答案: