get thums with JQUERY

Question

get thums with JQUERY

Navigation

#1 by (1 votes)

0

Good morning,

someone could help me translate a piece of javaScript code to JQuery

var canvas = document.querySelector("#video-canvas"),
    ctx = canvas.getContext("2d"),
    videoAs = document.querySelector("#main-video");

document.querySelector("#upload-button").addEventListener('click', function() {
    document.querySelector("#file-to-upload").click();
});


document.querySelector("#file-to-upload").addEventListener('change', function() {

    if(['video/mp4'].indexOf(document.querySelector("#file-to-upload").files[0].type) == -1) {
        alert('Error : Only MP4 format allowed');
        return;
    }


    document.querySelector("#upload-button").style.display = 'none';


    document.querySelector("#main-video source").setAttribute('src', URL.createObjectURL(document.querySelector("#file-to-upload").files[0]));


    videoAs.load();
    videoAs.style.display = 'inline';


    videoAs.addEventListener('loadedmetadata', function() { console.log(videoAs.duration);
        var video_duration = videoAs.duration,
            duration_options_html = '';


        for(var i=0; i<Math.floor(video_duration); i=i+4) {
            duration_options_html += '<option value="0">0</option>';
        }
        document.querySelector("#set-video-seconds").innerHTML = duration_options_html;


        document.querySelector("#thumbnail-container").style.display = 'block';


        canvas.width = videoAs.videoWidth;
        canvas.height = videoAs.videoHeight;
    });
});

document.querySelector("#set-video-seconds").addEventListener('change', function() {
    videoAs.currentTime = document.querySelector("#set-video-seconds").value;


    document.querySelector("#set-video-seconds").disabled = true;
    document.querySelector("#get-thumbnail").style.display = 'none';
});


document.querySelector("#main-video").addEventListener('timeupdate', function() {

    document.querySelector("#set-video-seconds").disabled = false;
    document.querySelector("#get-thumbnail").style.display = 'inline';
});

document.querySelector("#get-thumbnail").addEventListener('click', function() {
    ctx.drawImage(videoAs, 0, 0, videoAs.videoWidth, videoAs.videoHeight);

    document.querySelector("#get-thumbnail").setAttribute('href', canvas.toDataURL());
    document.querySelector("#get-thumbnail").setAttribute('download', 'thumbnail.png');
});

or guide me how I could do it! I already tried but I get several mistakes!

<div id="video-demo-container">
    <button id="upload-button">Select MP4 Video</button> 
    <input type="file" id="file-to-upload" accept="video/mp4" />
    <video id="main-video" controls>
        <source type="video/mp4">
    </video>
    <canvas id="video-canvas"></canvas>
    <div id="thumbnail-container">
         Seek to <select id="set-video-seconds"></select> seconds <a id="get-thumbnail" href="#">Download Thumbnail</a>
    </div>
    <div id="tumb-prev">

    </div>
</div>

javascript jquery

asked by daniel 08.09.2018 в 09:33

source

1 answer

How can I empty a RecyclerView before refilling it? How to count the values of an array that are equal and put the total number of those elements equal in a message?

score 1 · Accepted Answer

Look, I think it's going around here

var canvas = $("#video-canvas")[0],
    ctx = canvas.getContext("2d"),
    videoAs = $("#main-video")[0];

$("#upload-button").click(function() {
    $("#file-to-upload").click();
});


$("#file-to-upload").change(function(){

    if(['video/mp4'].indexOf($("#file-to-upload").files[0].type) == -1) {
        alert('Error : Only MP4 format allowed');
        return;
    }


    $("#upload-button").css("display",'none');
    $("#main-video source").attr('src', URL.createObjectURL($("#file-to-upload").files[0]));


    videoAs.load();
    videoAs.css("display",'inline');

    videoAs.addEventListener('loadedmetadata', function() { 
        console.log(videoAs.duration);
        var video_duration = videoAs.duration,
            duration_options_html = '';
        for(var i=0; i<Math.floor(video_duration); i=i+4) {
            duration_options_html += '<option value="0">0</option>';
        }
        $("#set-video-seconds").html(duration_options_html);
        $("#thumbnail-container").css("display",'block');
        canvas.width = videoAs.videoWidth;
        canvas.height = videoAs.videoHeight;
    });
});

$("#set-video-seconds").change(function() {
    videoAs.currentTime = $("#set-video-seconds").val();
    $("#set-video-seconds").attr("disabled","disabled");
    $("#get-thumbnail").css("display",'none');
});


$("#main-video").bind('timeupdate', function() {
    $("#set-video-seconds").removeAttr("disabled");
    $("#get-thumbnail").css("display",'inline');
});

$("#get-thumbnail").click(function() {
    ctx.drawImage(videoAs, 0, 0, videoAs.videoWidth, videoAs.videoHeight);
    $("#get-thumbnail").attr('href', canvas.toDataURL());
    $("#get-thumbnail").attr('download', 'thumbnail.png');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<canvas id="main-video"></canvas>
<canvas id="video-canvas"></canvas>

To your question you can complement it with the html, so we could have a more complete test

Greetings:)