如何更新我的模板，以便进度条显示视频在播放过程中的位置？

Question

双子座Plasma.js

var Transform = famous.core.Transform;

    Template.geminiPlasma.rendered = function() {
        var plasmaFView = FView.byId('gemini-plasma');
        var steelFabVideoControlsSurface = FView.byId('steel-fab-video-controls-surface');
        console.log("plasmaFView: ", plasmaFView);
        console.log("steelFabVideoControlsSurface: ", steelFabVideoControlsSurface);


        plasmaFView.modifier.setSize([undefined, undefined]);
        plasmaFView.modifier.setTransform(Transform.translate(0, -60), {duration: 1000});

        steelFabVideoControlsSurface.modifier.setSize([undefined,100]);
        steelFabVideoControlsSurface.modifier.setTransform(Transform.translate(window.innerWidth - 300, window.innerHeight - 170, 999) );

GeminiPlasma 模板：

<template name="geminiPlasma">
    {{#View modifier="StateModifier"}}
        {{#Surface id="gemini-plasma" modifier="StateModifier"}}
            <article class="above-fold steel-fab">
                <div class="bg-fade"></div>
                <video id="video" class="bgvid">
                    <source src="/videos/gemini-plasma.mp4" type="video/mp4">
                </video>
                <h1>FICEP- Gemini HP 25-CNC Thermal Cutting</h1>
                <p>Fast, accurate cuts</p>
            </article>
        {{/Surface}}
        {{>Surface template="videoControls" id="steel-fab-video-controls-surface" modifier="StateModifier"}}
{{/View}}
</template>

VideoControls 模板

<template name="videoControls">
    <div id="video-controls">
        <button type="button" id="play-pause">Play</button>
        <input type="range" name="seek-bar" id="seek-bar" value="0">
        <button type="button" id="mute">Mute</button>
    </div>
</template>

VideoControls.js:

var Transform = famous.core.Transform;

Template.videoControls.rendered = function() {
    var videoControlsFView = FView.from(this);
    videoControlsFView.modifier.setTransform(Transform.translate(30, window.innerHeight - 320, 9999));
};

Template.videoControls.events({
    'click button#play-pause': function(event) {
        var video = document.getElementById("video");
        var playButton = document.getElementById("play-pause");

        if (video.paused == true) {
                    video.play();
                    playButton.innerHTML = "Pause";
                } else {
                    video.pause();
                    playButton.innerHTML = "Play";
                }
    },
    'click button#mute': function(event) {
        var video = document.getElementById("video");
        var muteButton = document.getElementById("mute");
        if (video.muted == false) {
            video.muted = true;
            muteButton.innerHTML = "Unmute";
        } else {
            video.muted = false;
            muteButton.innerHTML = "Mute";
        }
    },
    'click #seek-bar': function() {
        var video = document.getElementById("video");   
        var seekBar = document.getElementById("seek-bar");

        var time = video.duration * (seekBar.value / 100);
        video.currentTime = time;

        console.log("video.duration: ", video.duration);
        console.log("video.currentTime: ", video.currentTime);

        var value = (100 / video.duration) * video.currentTime;
        seekBar.value = value;
    }
});

我正在使用 Meteor 和 Famous（著名视图）。如何更新 seekBar（使反应）以显示视频在播放过程中的位置？ <input type="range" name="seek-bar" id="seek-bar" value="{{getValue}}"> 然后在模板的助手中创建一个 getValue 方法？如果这样做，那么如何从视频中获取更新的值？

Answer 1

Template.videoControls.events({
    'click button#play-pause': function(event) {
        var video = document.getElementById("video");
        var playButton = document.getElementById("play-pause");
        var seekBar = document.getElementById("seek-bar");

        // Event listener for the seek bar
        seekBar.addEventListener("change", function() {
            // Calculate the new time
            var time = video.duration * (seekBar.value / 100);

            // Update the video time
            video.currentTime = time;
        });


        // Update the seek bar as the video plays
        video.addEventListener("timeupdate", function() {
            // Calculate the slider value
            var value = (100 / video.duration) * video.currentTime;

            // Update the slider value
            seekBar.value = value;
        });


        if (video.paused == true) {
                    video.play();
                    playButton.innerHTML = "Pause";

                } else {
                    video.pause();
                    playButton.innerHTML = "Play";
                }
    },

如何更新我的模板，以便进度条显示视频在播放过程中的位置？

How do I update my template so the progress bar shows where the video is during playback?

html5-video

meteor

famo.us