JQuery условие наведения видео - проверьте, является ли источник видео - PullRequest
Новая
       23

JQuery условие наведения видео - проверьте, является ли источник видео

0 голосов
/ 04 мая 2018

Я использую этот потрясающий код парочкой замечательных парней (подтверждений в коде) для загрузки некоторого контента, когда пользователь наводит ссылку.

То, что у меня есть, доставляет удовольствие, но оно предназначено только для изображений в настоящее время, поэтому я пытаюсь распространить его и на видео.

Полное раскрытие, я не разработчик или программист. Я программист начала 2000-х, который делал сайты с <table> s.

Я взломал все вместе, как мне кажется, с помощью небольшого исследования, но я пришел сюда, чтобы посмотреть, не может ли кто-нибудь поделится своим опытом, чтобы отточить его.

Что я сделал, так это добавил пару условий: «если» источник равен видео, то добавьте код <video>, «иначе» сделайте то, что он делал до того, как использовать <img>.

Бит, который мне больше всего нужен, - это как определить, что источник this.rel является видео для первого условия. Мои мысли проверяли, заканчивался ли источник на «.mp4». Я понятия не имею, если это правильный подход.

Мысли и помощь высоко ценится. 

(function($) {
/*
 * Url preview script 
 * powered by jQuery (https://www.jquery.com)
 * 
 * written by Alen Grakalic (http://cssglobe.com)
 * edited by Daan van der Zwaag (https://dvdz.design)
 *
 */


function previewImages() {
  /* CONFIG */

  xOffset = 100;
  yOffset = 80;

  // these 2 variable determine popup's distance from the cursor
  // you might want to adjust to get the right result

  /* END CONFIG */

  $("a.screenshot").hover(function(e) {

      var $this = $(this); // caching $(this)

      $this.data('initialText', $this.text());

      $ if ( The file is an mp4 ) {
        $("body").append("<div id='previewImage'><video width='600' height='600' autoplay>" + "<source src='" + this.rel + "' type='video/mp4' />" + "Time to get a better browser dude, this one doesn't support video. Crazy." + "</video>" + "</div>")
      },

      $ else {
       $("body").append("<div id='previewImage'><img src='" + this.rel + "' alt='Link preview image' />" + "</div>")
      },

      $("#previewImage")
       .css("top", (e.pageY - xOffset) + "px")
       .css("left", (e.pageX + yOffset) + "px")
       .fadeIn("3000,swing")
       .css("z-index", "3");
    },
    function() {

      var $this = $(this); // caching $(this)
      $this.text($this.data('initialText'));

      $("#previewImage").remove();
    });

$("a.screenshot").mousemove(function(e) {

    $("#previewImage")
      .css("top", (e.pageY - xOffset) + "px")
      .css("left", (e.pageX + yOffset) + "px");

  });
};

  previewImages();
})( jQuery );
...