使用媒体片段并防止浏览器重新加载目标HTMLMediaElement

时间:2018-12-27 16:56:36

标签: javascript node.js html5 electron html5-video

我正在开发一个程序,是否必须使用媒体片段来使用户保持在特定的开始和结束时间范围内。并且用户将可以设置开始时间和结束时间。

const path = require("path");

const createFragment = (startEnd,location) => {      
    const fragmentEl = document.createElement("div");
    fragmentEl.setAttribute("data-fragment", startEnd);
    fragmentEl.classList.add("akara-media-fragment");
    fragmentEl.style.left = `${location}px`;
    akaraTimeIndicator.appendChild(fragmentEl);
    if ( startEnd === "start" ) {
       const reg = new RegExp(`${path.extname(video.src)}$`);

       // how can i prevent the browser from reloading the video element, i want the fragment to work on the fly
       video.src = video.src.replace(reg, `${path.extname(video.src)}#t=the time frame goes here`);
    }
};


akaraTimeIndicator.addEventListener("contextmenu", evt => {

    const { left , right } = akaraTimeIndicator.getBoundingClientRect();

    const firstFragment = akaraTimeIndicator.querySelector("[data-fragment=start]");
    const lastFragment = akaraTimeIndicator.querySelector("[data-fragment=end]");

    // * 100 to get calculation
    const XAxis = (evt.clientX / 1000) * 100;

    if ( ! firstFragment ) {
        createFragment("start", evt.clientX);
        return;
    }

    const firstFrag = parseInt(firstFragment.style.left);
    const lastFrag = lastFragment ? parseInt(lastFragment.style.left) : null;

    if ( evt.clientX <  firstFrag ) {
        firstFragment.remove();
        createFragment("start", evt.clientX);
        return;
    }

    if ( lastFrag &&
         (evt.clientX > lastFrag
          || evt.clientX < lastFrag
         )
       ) {
        lastFragment.remove();
        createFragment("end", evt.clientX);
        return;
    }

    if ( evt.clientX === firstFrag ) {
        if ( lastFrag ) lastFragment.setAttribute("data-fragment", "start");
        firstFragment.remove();
        akara_emit.emit("akara::fragment:removed", "first");
        return;
    }

    if ( lastFrag && ( evt.clientX === lastFrag ) ) {
        lastFragment.remove();
        akara_emit.emit("akara::fragment:remove", "last");
        return;
    }

    createFragment("end", evt.clientX);
    return;
});

设置媒体片段的过程稍微复杂一些,但主要问题是在没有浏览器重新加载HTMLMediaElement元素的情况下是否有任何可能的方法来设置片段

0 个答案:

没有答案