j s 实现视频播放

1.具体参数

videoBanner：视频封面
videoUrl：视频链接地址
videoType：视频类型（优酷视频填写iframe）

2.实例

<div class="视频元素名称"  data-bg-original="{{{videoBanner}}}" data-toggle="lazy-loading"
     data-src="{{videoUrl}}"
     {{#if(videoType === 'true' || videoType === true)}} data-type="iframe"
     {{/if}}>
  {{#if(videoUrl)}}
  <img data-original="https://img.alicdn.com/tfs/TB1t6dBozDpK1RjSZFrXXa78VXa-132-130.png" data-toggle="lazy-loading"
       class="off">
  <img data-original="https://img.alicdn.com/tfs/TB1JbREoBLoK1RjSZFuXXXn0XXa-132-130.png" data-toggle="lazy-loading"
       class="on">
  {{/if}}
</div>

function getVideo(src, type) {
    var bodyWidth = $("body").width();
    if (bodyWidth < 800) {
      bodyWidth = "95%";
    } else {
      bodyWidth = "60%";
    }
    var player =
        '<div id="myModal" class="modal fade vertical-alignment-helper" style="padding-left: 0px;">' +
        '<div class="modal-dialog vertical-align-center" style="width: ' +
        bodyWidth +
        ';" data-width="800">' +
        '<div class="modal-content">' +
        '<div class="modal-body">' +
        '<button type="button" class="close close-normal" data-dismiss="modal">' +
        "</button>" +
        '<div align="center" class="embed-responsive embed-responsive-16by9">';
    if (type !== "iframe") {
      player +=
        '<video controls="" class="embed-responsive-item" id="alicloud-top-pic-modal-video" height="">';
      player += '<source src="' + src + '"></video>';
    } else {
      player +=
        '<iframe src="' +
        src +
        '" frameborder="0" width="800" allow="autoplay; encrypted-media" allowfullscreen></iframe>';
    }
    player += "</div>";
    player += "</div>";
    player += "</div>";
    player += "</div>";
    player += "</div>";
    return player;
  }
var nodeWrap = $('.根元素class名')
$(".视频元素名称", nodeWrap).click(function() {
  var type = $(this).attr("data-type");
  var src = $(this).attr("data-src");
  if (src !== '') { 
    nodeWrap.append(getVideo(src, type));
    $("#myModal")
      .modal("show")
      .on("hidden.bs.modal", function() {
      if (type !== "iframe") {
        document
          .getElementById("alicloud-top-pic-modal-video")
          .pause();
      }
    });
    $("#myModal").on("hide.bs.modal", function() {
      $("#myModal").remove();
    });
    if (type !== "iframe") {
      document
        .getElementById("alicloud-top-pic-modal-video")
        .play();
    }
  }

});