Recherche avancée

Sur d’autres sites (6746)

• ffmpeg command to add moving text watermark to video [closed]

  13 octobre 2023, par Imran Khan
  


  


          // Constants for watermark movement, direction change intervals, fade intervals, and overlap duration
        const MOVE_SPEED = 3;
        const DIRECTION_CHANGE_MIN = 3000;
        const DIRECTION_CHANGE_MAX = 6000;
        const FADE_INTERVAL_MIN = 10000;
        const FADE_INTERVAL_MAX = 20000;
        const OVERLAP_DURATION = 2000;

        // Get references to the video container and watermarks
        const container = document.querySelector('.video-container');
        const watermark1 = document.getElementById('watermark1');
        const watermark2 = document.getElementById('watermark2');

        // Helper function to get a random integer between min and max (inclusive)
        function getRandomInt(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }

        // Helper function to get a random direction (either 1 or -1)
        function getRandomDirection() {
            return Math.random() > 0.5 ? 1 : -1;
        }

        // Set the initial position of the watermark inside the video container
        function setInitialPosition(watermark) {
            const x = getRandomInt(0, container.offsetWidth - watermark.offsetWidth);
            const y = getRandomInt(0, container.offsetHeight - watermark.offsetHeight);
            watermark.style.left = `${x}px`;
            watermark.style.top = `${y}px`;
            watermark.style.opacity = 1;
        }

        // Function to handle continuous movement of the watermark
        function continuousMove(watermark) {
            let dx = getRandomDirection() * MOVE_SPEED;
            let dy = getRandomDirection() * MOVE_SPEED;

            // Inner function to handle the actual movement logic
            function move() {
                let x = parseInt(watermark.style.left || 0) + dx;
                let y = parseInt(watermark.style.top || 0) + dy;

                // Check boundaries and reverse direction if necessary
                if (x < 0 || x > container.offsetWidth - watermark.offsetWidth) {
                    dx = -dx;
                }
                if (y < 0 || y > container.offsetHeight - watermark.offsetHeight) {
                    dy = -dy;
                }

                // Apply the new position
                watermark.style.left = `${x}px`;
                watermark.style.top = `${y}px`;

                // Continue moving
                setTimeout(move, 100);
            }

            move();

            // Change direction at random intervals
            setInterval(() => {
                const randomChoice = Math.random();
                if (randomChoice < 0.33) {
                    dx = getRandomDirection() * MOVE_SPEED;
                    dy = 0;
                } else if (randomChoice < 0.66) {
                    dy = getRandomDirection() * MOVE_SPEED;
                    dx = 0;
                } else {
                    dx = getRandomDirection() * MOVE_SPEED;
                    dy = getRandomDirection() * MOVE_SPEED;
                }
            }, getRandomInt(DIRECTION_CHANGE_MIN, DIRECTION_CHANGE_MAX));
        }

        // Handle the fading out of the old watermark and fading in of the new watermark
        function fadeOutAndIn(oldWatermark, newWatermark) {
            setTimeout(() => {
                setInitialPosition(newWatermark);
                newWatermark.style.opacity = 1;
            }, 0);

            setTimeout(() => {
                oldWatermark.style.opacity = 0;
            }, OVERLAP_DURATION);

            // Continue the cycle
            setTimeout(() => fadeOutAndIn(newWatermark, oldWatermark), getRandomInt(FADE_INTERVAL_MIN, FADE_INTERVAL_MAX));
        }

        // Initialize the watermarks
        setInitialPosition(watermark1);
        continuousMove(watermark1);
        setTimeout(() => fadeOutAndIn(watermark1, watermark2), getRandomInt(FADE_INTERVAL_MIN, FADE_INTERVAL_MAX));
        continuousMove(watermark2);
    

  


  body, html {
            height: 100%;
            margin: 0;
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #eee;
        }

        .video-container {
            width: 50vw;
            height: 50vh;
            background-color: black;
            position: relative;
            overflow: hidden;
        }

        .watermark {
            font-size: 22px;
            position: absolute;
            color: white;
            opacity: 0;
            transition: opacity 2s;
        }

  


  &#xA;&#xA;&#xA;    &#xA;    &#xA;    &#xA;&#xA;&#xA;    <div class="video-container">&#xA;        <span class="watermark">watermark</span>&#xA;        <span class="watermark">watermark</span>&#xA;    </div>&#xA;    &#xA;&#xA;

  


  


  



  I am trying to achieve an animation effect using ffmpeg. I am adding text watermark to an input video and animate the text diagonally, horizontally or vertically changed randomly. Here is what I have achieved so far.

  


  ffmpeg -i video.mp4 -c:v libx264 -preset veryfast -crf 25 -tune zerolatency -vendor ap10 -pix_fmt yuv420p -filter:v "drawtext=fontfile=./fonts/Roboto/Roboto-Light.ttf:text='Watermark':fontcolor=white:alpha=0.5:fontsize=60:y=h/10*mod(t\,10):x=w/10*mod(t\,10):enable=1" -c:a copy watermark.mp4

  


  Here is what I want it to work.

  


  Initial Position :
The watermark randomly placed in the video the first time they appear.

  


  Continuous Movement :
The watermark continuously moves within the video.
The direction and speed of the watermark's movement are random. It can move diagonally, purely horizontally, or purely vertically.
When the watermark reaches the boundaries of the video, it bounces back, changing its direction.

  


  Direction Change :
During its continuous movement, the watermark will suddenly change its direction at random intervals between 3 to 6 seconds.
When changing direction, the watermark can randomly determined move diagonally, purely horizontally, or purely vertically.

  


  Fade In and Out :
Every 10 to 20 seconds (randomly determined), the current watermark begins to fade out.
As the old watermark starts to fade out, a new watermark fades in at a random position, ensuring that there's always a visible watermark on the screen.
These two watermarks (the fading old one and the emerging new one) overlap on the screen for a duration of 2 seconds, after which the old watermark completely disappears.
These patterns and characteristics together provide a dynamic, constantly moving, and changing watermark for the video

  


  To achieve the result I think we can use the drawtext multiple times. I have attached the HTML and JavaScript variant just for the reference to understand the result but I am trying to do this using ffmpeg.

  


• Failed to load resource : the server responded with a status of 404 (Not Found)

  28 août 2013, par Kaushik

  This problem is quite unsolvable for me.. I have a Fileupload control and I upload only Video files. Then I use ffmpeg to obtain a frame [image] from that video to display it as a preview. But I am unable to load that image into Image control. The Image will be saving in the specified folder but not able to load it and gives the error which I mentioned in topic.

  This is my aspx code..

  <div class="transbox" runat="server">
  
              <fieldset style="width:50%; margin-left:300px">
  
              <legend style="color:white;font-family:&amp;#39;Palatino Linotype&amp;#39;">Upload Video Files</legend>
  
                  
  
                  
  
                  
  
              </fieldset>
  
  
  
          
  
              <div class="head" runat="server"><label>Write Description</label>
  
                  
  
              </div>
  
              <div runat="server" style="margin-top:22px;">
  
  
  
              </div>
  
          
  
       </div>

  and this my aspx.cs code..

  protected void uploadedFile_Click(object sender, EventArgs e)
  
      {
  
          if (Page.IsPostBack)
  
          {
  
              if (UploadImages.HasFiles)
  
              {
  
  
  
                  string fileExt = Path.GetExtension(UploadImages.FileName).ToLower();
  
                  if (fileExt == ".flv" || fileExt == ".avi" || fileExt == ".mp4" || fileExt == ".3gp" || fileExt == ".mov" || fileExt == ".wmv" || fileExt == ".mpg" || fileExt == ".asf" || fileExt == ".swf")
  
                  {
  
                      foreach (HttpPostedFile uploadedFile in UploadImages.PostedFiles)
  
                      {
  
                          count += 1;
  
  
  
                          filepath = Server.MapPath("~/Videos/" + uploadedFile.FileName);
  
                          uploadedFile.SaveAs(filepath);
  
                          vurl.Add(uploadedFile.FileName.ToString());
  
                          newpath = createvidImage(filepath);
  
  
  
                          try
  
                          {
  
                              createImgPanel();
  
                              Image nimg = Page.FindControl("img" + count) as Image;
  
                              nimg.ImageUrl = "../Images/Video_Thumbs/" + newpath.ToString();
  
                              al.Add(newpath.ToString());
  
                          }
  
  
  
                          catch (Exception ex)
  
                          {
  
                              Page.ClientScript.RegisterStartupScript(GetType(), "msgbox", "alert('" + ex.Message.ToString() + "!!');", true);
  
                          }
  
  
  
                      }
  
                      Session["name2"] = al;
  
                      Session["vurl"] = vurl;
  
                  }
  
                  else
  
                  {
  
                      lblerror2.Text = "Please select only Image Files";
  
                  }
  
  
  
              }
  
              else
  
              {
  
                  lblerror2.Text = "Please select File/s";
  
              }
  
          }
  
  
  
      }
  
      public void createImgPanel()
  
      {
  
          StringBuilder sb = new StringBuilder();
  
          tid = tid + 1;
  
          textid = "txt" + tid;
  
          ta = new TextBox();
  
          img = new Image();
  
          ta.TextMode = TextBoxMode.MultiLine;
  
          dload = new HtmlGenericControl("div");
  
          updtpanel.Visible = true;
  
          dload.Attributes.Add("class", "dataload");
  
  
  
          dload.ID = "ind" + tid;
  
          img.CssClass = "loadimg";
  
  
  
          img.ID = "img" + tid;
  
          img.Attributes.Add("runat", "server");
  
          ta.Attributes.Add("class", "txtdes");
  
          ta.ID = textid;
  
  
  
          dload.Controls.Add(img);
  
          dload.Controls.Add(ta);
  
          dback.Controls.Add(dload);
  
      }
  
  
  
      public string createvidImage(string fpath)
  
      {
  
          string thumbname = "";
  
          string newthumb = "";
  
          string newpath1 = "";
  
          if (Page.IsPostBack)
  
          {
  
              string link = "";
  
              link = fpath.ToString();
  
  
  
              Guid nid = Guid.NewGuid();
  
  
  
              thumbname = Server.MapPath("..//Images//Video_Thumbs//") + nid + ".jpg";
  
              newthumb = nid + ".jpg";
  
  
  
              string param = String.Format("-ss {0} -i \"" + link + "\" -s 150*120  -vframes 1 -f image2 -vcodec mjpeg \"" + thumbname + "\"", 20);
  
              Process p = new Process();
  
              p.StartInfo.Arguments = param;
  
              p.StartInfo.FileName = Server.MapPath("..//ffmpeg//ffmpeg.exe");
  
              p.StartInfo.CreateNoWindow = false;
  
              p.StartInfo.UseShellExecute = false;
  
              p.Start();
  
              newpath1 = newthumb.ToString();
  
          }
  
          return newpath1;
  
      }

• React Native How to add a text on a video using FFMPEG-react-native-kit

  14 août 2023, par MZiyad

  ---videoPath.path : from temporary storage
---outputVideoUri : temporary storage
---fontPath : my font family name
--- command
command = -y -i ${videoPath?.path} -vf "drawtext=fontfile='${fontPath}':text='My text starting at 640x360'::x=640:y=360:fontsize=24:fontcolor=white" -crf 28  -c:a aac -strict -2 -map "[0vl]" -map 2:a -shortest ${outputVideoUri} ;

  


  it's not working

  


  I need some one to help me add a water mark text to a video in react native,