Nút phát tùy chỉnh video html5

Trước đó trong khóa học này, bạn đã học cách thêm video vào các trang web bằng phần tử. Sau khi làm như vậy, bạn nhận thấy rằng trình phát video tích hợp hơi khác một chút trong mọi trình duyệt. Nếu bạn muốn một trình phát trông nhất quán trên tất cả các trình duyệt hoặc nếu bạn chỉ muốn một trình phát duy nhất của riêng bạn, bạn hoàn toàn có thể làm điều đó với JavaScript

Trong bài học này, bạn sẽ sử dụng JavaScript để xây dựng các điều khiển tùy chỉnh để phát video của mình và sẽ sử dụng các điều khiển tùy chỉnh của mình để thay thế các điều khiển tích hợp sẵn của trình duyệt

Kết quả của người học

Khi hoàn thành bài tập này

• bạn sẽ có thể giải thích API là gì và cách bạn có thể sử dụng nó để kiểm soát nội dung của các trang web
• bạn sẽ có thể sử dụng JavaScript để kiểm soát phần tử video HTML5

API phương tiện HTML5

Khi bạn đã nhúng phương tiện vào trang web của mình bằng các phần tử HTML5 mới, bạn có thể kiểm soát chúng bằng mã JavaScript. Điều này là do HTML5 có API cho phép kiểm soát bên ngoài các phần tử này. API là viết tắt của "giao diện chương trình ứng dụng" và nó bao gồm một tập hợp các biến và phương thức có thể được truy cập bằng các tập lệnh hoặc chương trình bên ngoài. API phổ biến trên web. Một vài ví dụ phổ biến bao gồm

Tài liệu dành cho các API chẳng hạn như những tài liệu được liên kết ở trên là tài liệu kỹ thuật và ban đầu có thể khiến bạn choáng ngợp, nhưng bên trong tất cả các chi tiết kỹ thuật thường là một số ví dụ đơn giản để giúp bạn bắt đầu

Tài liệu chính thức cho API phương tiện HTML5 có trong. Các hoạt động sau đây cung cấp cho bạn cái nhìn đơn giản hơn nhiều về những điều cơ bản

Các hoạt động

• Mở video. html trong cả trình chỉnh sửa web và trình duyệt của bạn
• Trong mã nguồn của bạn, hãy thêm thuộc tính id vào phần tử của bạn. Id có thể là bất kỳ thứ gì, nhưng giả sử bạn sử dụng id="myvideo". Việc thêm id giúp tham chiếu video bằng JavaScript dễ dàng hơn
• Xóa thuộc tính điều khiển khỏi phần tử. Bạn sẽ xây dựng các điều khiển của riêng mình, vì vậy bạn không cần các điều khiển tích hợp của trình duyệt nữa
• Bên dưới thành phần video, hãy thêm một thành phần mới

  phần tử và lấp đầy nó bằng các phần tử sẽ được sử dụng để điều khiển trình phát, như thế này.

  Phát Tạm dừng Nhanh hơn Chậm hơn To hơn Nhẹ nhàng hơn

  Tóm lại, tôi có một video HTML5 trên một trang web và tôi muốn một nút phát/tạm dừng tùy chỉnh vì tôi không muốn hiển thị các điều khiển mặc định của trình duyệt. Nó trông không đẹp lắm và nó hơi OTT cho những gì tôi cần. Mục đích là để tiếp tục danh mục đầu tư của tôi, vì vậy tôi đang điều chỉnh những gì tôi tin là 'phương pháp hay nhất' ở đây để trở nên sáng tạo hơn một chút nhưng tôi sẵn sàng đón nhận các đề xuất

  Đây là đánh dấu HTML của tôi

  Tất cả dường như hoạt động/chơi ok. Trong CSS, tôi đã đặt height: auto; width: 100%; max-width: 100%; để làm cho phần tử

  $(document).ready(function() {
      // Get media - with autoplay disabled (audio or video).
      var media = $('video').not("[autoplay='autoplay']");
      var tolerancePixel = 200;
  
      function checkMedia(){
          // Get current browser top and bottom.
          var scrollTop = $(window).scrollTop() + tolerancePixel;
          var scrollBottom = $(window).scrollTop() + $(window).height() - tolerancePixel;
  
          media.each(function(index, el) {
              var yTopMedia = $(this).offset().top;
              var yBottomMedia = $(this).height() + yTopMedia;
  
              // Don't play video when outside of viewport.
              if(scrollTop < yBottomMedia && scrollBottom > yTopMedia){
                  $(this).get(0).play();
              } else {
                  $(this).get(0).pause();
              }
          });
      }
      $(document).on('scroll', checkMedia);
  });
  

  0 đáp ứng. Điều đó sẽ làm điều đó, phải không?

  Javascript hiện tại của tôi trông như thế này, thứ tôi nhận được từ StackOverflow

  $(document).ready(function() {
      // Get media - with autoplay disabled (audio or video).
      var media = $('video').not("[autoplay='autoplay']");
      var tolerancePixel = 200;
  
      function checkMedia(){
          // Get current browser top and bottom.
          var scrollTop = $(window).scrollTop() + tolerancePixel;
          var scrollBottom = $(window).scrollTop() + $(window).height() - tolerancePixel;
  
          media.each(function(index, el) {
              var yTopMedia = $(this).offset().top;
              var yBottomMedia = $(this).height() + yTopMedia;
  
              // Don't play video when outside of viewport.
              if(scrollTop < yBottomMedia && scrollBottom > yTopMedia){
                  $(this).get(0).play();
              } else {
                  $(this).get(0).pause();
              }
          });
      }
      $(document).on('scroll', checkMedia);
  });
  

  Vì video nằm ở giữa trang nên tôi không muốn video đó phát cho đến khi nó được xem. Kịch bản trên giúp với điều đó. Mặc dù tôi nghĩ sẽ tốt hơn nếu

  $(document).ready(function() {
      // Get media - with autoplay disabled (audio or video).
      var media = $('video').not("[autoplay='autoplay']");
      var tolerancePixel = 200;
  
      function checkMedia(){
          // Get current browser top and bottom.
          var scrollTop = $(window).scrollTop() + tolerancePixel;
          var scrollBottom = $(window).scrollTop() + $(window).height() - tolerancePixel;
  
          media.each(function(index, el) {
              var yTopMedia = $(this).offset().top;
              var yBottomMedia = $(this).height() + yTopMedia;
  
              // Don't play video when outside of viewport.
              if(scrollTop < yBottomMedia && scrollBottom > yTopMedia){
                  $(this).get(0).play();
              } else {
                  $(this).get(0).pause();
              }
          });
      }
      $(document).on('scroll', checkMedia);
  });
  

  1 có thể là phần trăm thay vì giá trị pixel – hoặc có cách nào khác để phát video sẽ hoạt động tốt hơn không?

  Tập lệnh đó thực hiện công việc nhưng nó gây khó khăn cho tôi khi thêm nút phát/tạm dừng. Tôi muốn các biểu tượng này nằm bên dưới video để người dùng có thể tạm dừng video nếu họ thích và sau đó khởi động lại video đó

  Tôi cũng nghĩ rằng sẽ là một ý tưởng hay nếu video dừng lại sau khi phát hết một lần và sau đó nút 'phát lại' xuất hiện

  Suy nghĩ của mọi người về điều này là gì và bạn có thể đưa ra lời khuyên nào không?

  26 Tháng Mười, 2017 lúc 11. 24 giờ chiều

  Shikkediel

  người tham gia

  Đây là một cây bút nếu ai đó cảm thấy muốn mân mê xung quanh. Tôi có thể thử nó sau…

  viết mã. io/anon/pen/rYBJWN

  27 Tháng Mười, 2017 lúc 5. 30 giờ sáng

  nghiệt ngã

  người tham gia

  Xin lỗi @Shikkediel. Tôi đã tạo một ví dụ, rõ ràng là tôi đã quên đưa nó vào. Tôi sẽ gắn bó với của bạn để tránh nhầm lẫn, nó khá giống nhau

  Tôi đã tìm thấy một số bài đăng trên StackOverflow về cách tạo các điều khiển tùy chỉnh nhưng tôi không thể làm cho chúng hoạt động với điều này. Có thể do javascript 'trong chế độ xem' gây ra xung đột với nó

  27 Tháng 10, 2017 lúc 6. 50 giờ sáng

  Shikkediel

  người tham gia

  Tôi không thể giải quyết được vấn đề này nhưng có vẻ khá thú vị. tôi sẽ trở lại

  Chỉnh sửa - đây là một khởi đầu nhỏ (còn lâu mới kết thúc)

  viết mã. io/anon/bút/oovRVG

  Một điều tôi sẽ làm để có trải nghiệm người dùng tốt hơn là tắt tiếng video trừ khi được chọn khác…

  27 Tháng 10, 2017 lúc 8. 16 giờ sáng

  nghiệt ngã

  người tham gia

  Định đăng cái gì đó nhưng bạn đã đánh bại tôi. Tôi đang sử dụng điện thoại của mình trong tương lai nhưng nó hoạt động rất tốt trong nháy mắt. Tôi sẽ kiểm tra nó một chút khi tôi về nhà

  Tôi định nói (như thường lệ với những lần thử Javascript của tôi) khi tôi cố gắng thêm một điều khiển tùy chỉnh, đó là một chút mã Frankenstein từ các nguồn khác nhau. Vì vậy, điều đó có lẽ đã không giúp được gì. Trong số các chủ đề StackOverflow, tôi cũng đã xem cái này. http. //www. khối sáng tạo. com/html5/build-custom-html5-video-player-9134473 nhưng tôi không thể để chúng phát cùng nhau

  Video tôi đang sử dụng không có âm thanh nhưng điều hợp lý là nên có tùy chọn bật tiếng video để chứng minh điều đó trong tương lai. Tôi đồng ý nếu nó sẽ phát theo mặc định, thì ít nhất nó phải bị tắt tiếng. Hiện tại chỉ có 1 video trên bất kỳ trang nào. Tôi cho rằng tôi thực sự nên thêm tính năng tự động phát vào một lớp vì nếu có nhiều video trên một trang, sẽ rất khó chịu nếu tất cả chúng đều tự động phát

  27 Tháng 10, 2017 lúc 7. 42 giờ chiều

  Shikkediel

  người tham gia

  Tôi đã rẽ nhánh nó và cũng thêm nút tắt tiếng. Khi người dùng nhấp vào nút tạm dừng, nó sẽ bỏ chọn nó khỏi hành động cuộn. Có vẻ như là một ý tưởng tốt. Tôi sẽ phải làm việc với nó nhiều hơn một chút, chẳng hạn như nó không có khả năng thực hiện nhiều vid

  viết mã. io/Shikkediel/pen/qVBOPo

  Tôi đã không sử dụng Codepen trong một thời gian và không thấy https mới thực thi. Bây giờ tất cả các liên kết tập lệnh http của tôi không hoạt động nữa. Một số làm lại để làm ở đó. Vui vì tôi đã không tạo ra nhiều bút

  -/

  29 Tháng Mười, 2017 lúc 12. 11 giờ tối

  Shikkediel

  người tham gia

  Viết lại toàn bộ, dựa trên một kịch bản của riêng tôi. Nó cũng sẽ tính đến nhiều luồng video và tính toán lại mọi thứ khi thay đổi kích thước màn hình

  Những điều nhỏ nhặt vẫn nên được thực hiện…

  31 Tháng Mười, 2017 lúc 4. 04 giờ sáng

  nghiệt ngã

  người tham gia

  Này @Shikkediel cái này trông thật tuyệt, cảm ơn rất nhiều. Bạn đã vượt lên trên tất cả như thường lệ. Bây giờ tôi sẽ thêm nó vào trang web của mình và tạo kiểu cho các nút, v.v. Không quan tâm những gì được tính toán lại khi màn hình thay đổi kích thước?

  Tôi nghĩ điều duy nhất tôi có thể sửa đổi hoặc thêm vào là thêm/xóa một lớp thay vì bit

  $(this).text(function(i, v) {
      return v === 'MUTE' ? 'UNMUTE' : 'MUTE';
  });
  

  Chỉ cần tôi sử dụng một biểu tượng và tôi có thể tắt chúng đi

  Cảm ơn một lần nữa

  31 Tháng Mười, 2017 lúc 11. 23 giờ sáng

  Shikkediel

  người tham gia

  Không vấn đề gì, chủ yếu là bản sao dán từ các tập lệnh trước đây tôi đã tổng hợp lại. Tôi cũng đã thêm một chức năng điều tiết để nó chỉ kiểm tra mọi thứ 10 lần một giây. Bạn đã đúng về việc tính toán lại, nó sẽ lưu vị trí của các video khi thay đổi kích thước

  zenith.push(placement-$(window).height()*0.9+size);
  nadir.push(placement+size*0.1);
  

  Biến

  $(document).ready(function() {
      // Get media - with autoplay disabled (audio or video).
      var media = $('video').not("[autoplay='autoplay']");
      var tolerancePixel = 200;
  
      function checkMedia(){
          // Get current browser top and bottom.
          var scrollTop = $(window).scrollTop() + tolerancePixel;
          var scrollBottom = $(window).scrollTop() + $(window).height() - tolerancePixel;
  
          media.each(function(index, el) {
              var yTopMedia = $(this).offset().top;
              var yBottomMedia = $(this).height() + yTopMedia;
  
              // Don't play video when outside of viewport.
              if(scrollTop < yBottomMedia && scrollBottom > yTopMedia){
                  $(this).get(0).play();
              } else {
                  $(this).get(0).pause();
              }
          });
      }
      $(document).on('scroll', checkMedia);
  });
  

  2 xác định điểm bắt đầu của video khi nó xuất hiện từ cuối màn hình. Trong trường hợp này khi phần dưới cùng của video bằng 90% kích thước màn hình. Và

  $(document).ready(function() {
      // Get media - with autoplay disabled (audio or video).
      var media = $('video').not("[autoplay='autoplay']");
      var tolerancePixel = 200;
  
      function checkMedia(){
          // Get current browser top and bottom.
          var scrollTop = $(window).scrollTop() + tolerancePixel;
          var scrollBottom = $(window).scrollTop() + $(window).height() - tolerancePixel;
  
          media.each(function(index, el) {
              var yTopMedia = $(this).offset().top;
              var yBottomMedia = $(this).height() + yTopMedia;
  
              // Don't play video when outside of viewport.
              if(scrollTop < yBottomMedia && scrollBottom > yTopMedia){
                  $(this).get(0).play();
              } else {
                  $(this).get(0).pause();
              }
          });
      }
      $(document).on('scroll', checkMedia);
  });
  

  3 là điểm mà video dừng lại khi ra ngoài phần trên cùng của màn hình, điều này sẽ xảy ra khi 10% phần trên cùng của video đã biến mất. Hy vọng điều đó đã đủ rõ ràng

  Nhân tiện, bạn vẫn có thể sử dụng một chút mã để chèn biểu tượng nếu bạn sử dụng

  $(document).ready(function() {
      // Get media - with autoplay disabled (audio or video).
      var media = $('video').not("[autoplay='autoplay']");
      var tolerancePixel = 200;
  
      function checkMedia(){
          // Get current browser top and bottom.
          var scrollTop = $(window).scrollTop() + tolerancePixel;
          var scrollBottom = $(window).scrollTop() + $(window).height() - tolerancePixel;
  
          media.each(function(index, el) {
              var yTopMedia = $(this).offset().top;
              var yBottomMedia = $(this).height() + yTopMedia;
  
              // Don't play video when outside of viewport.
              if(scrollTop < yBottomMedia && scrollBottom > yTopMedia){
                  $(this).get(0).play();
              } else {
                  $(this).get(0).pause();
              }
          });
      }
      $(document).on('scroll', checkMedia);
  });
  

  4 thay vì

  $(document).ready(function() {
      // Get media - with autoplay disabled (audio or video).
      var media = $('video').not("[autoplay='autoplay']");
      var tolerancePixel = 200;
  
      function checkMedia(){
          // Get current browser top and bottom.
          var scrollTop = $(window).scrollTop() + tolerancePixel;
          var scrollBottom = $(window).scrollTop() + $(window).height() - tolerancePixel;
  
          media.each(function(index, el) {
              var yTopMedia = $(this).offset().top;
              var yBottomMedia = $(this).height() + yTopMedia;
  
              // Don't play video when outside of viewport.
              if(scrollTop < yBottomMedia && scrollBottom > yTopMedia){
                  $(this).get(0).play();
              } else {
                  $(this).get(0).pause();
              }
          });
      }
      $(document).on('scroll', checkMedia);
  });
  

  5

  $(this).html(function(i, v) {
     ...
  });
  

  Hãy cho tôi biết khi một cái gì đó không hoạt động. Chúc mừng

  31 Tháng Mười, 2017 lúc 11. 52 giờ sáng

  nghiệt ngã

  người tham gia

  Vâng điều đó có ý nghĩa. Tất cả dường như hoạt động tốt cho đến nay

  Tôi đã nghĩ với một lớp học, tôi có thể có một cái gì đó như thế này làm biểu tượng. https. // codepen. io/morgun/bút/mInAk

  Sau đó, chỉ cần sử dụng lớp

  $(document).ready(function() {
      // Get media - with autoplay disabled (audio or video).
      var media = $('video').not("[autoplay='autoplay']");
      var tolerancePixel = 200;
  
      function checkMedia(){
          // Get current browser top and bottom.
          var scrollTop = $(window).scrollTop() + tolerancePixel;
          var scrollBottom = $(window).scrollTop() + $(window).height() - tolerancePixel;
  
          media.each(function(index, el) {
              var yTopMedia = $(this).offset().top;
              var yBottomMedia = $(this).height() + yTopMedia;
  
              // Don't play video when outside of viewport.
              if(scrollTop < yBottomMedia && scrollBottom > yTopMedia){
                  $(this).get(0).play();
              } else {
                  $(this).get(0).pause();
              }
          });
      }
      $(document).on('scroll', checkMedia);
  });
  

  6 hoặc bất kỳ thứ gì để chuyển đổi giữa các trạng thái. Hoặc nếu là phiên bản đơn giản hơn, chỉ cần hiển thị các hình nền khác nhau trên cùng một nút. Tôi cho rằng nó cũng hoạt động tốt với biểu tượng tắt tiếng

  31 Tháng 10, 2017 lúc 12. 29 giờ tối

  Shikkediel

  người tham gia

  Tôi cũng đã thử mã hóa UTF-8 cho các biểu tượng nhưng thực sự không thể làm cho nó trông đẹp mắt. Chuyển đổi nền sẽ là cách tiếp cận tiếp theo của tôi nhưng ví dụ bạn đã đăng khá gọn gàng

  31 Tháng Mười, 2017 lúc 2. 16 giờ chiều

  nghiệt ngã

  người tham gia

  Vâng, họ có thể là một chút khó khăn. Tôi vẫn thấy lạ khi thêm các biểu tượng vào một nút mà không có văn bản dự phòng chỉ trong trường hợp các tập lệnh không kích hoạt, v.v. nhưng tôi cho rằng nếu đó là trường hợp thì trình phát sẽ không hoạt động.

  Đây có phải là một chút quá mức cần thiết (bên dưới)? . Vì vậy, các biểu tượng đại diện cho mặt đối lập của họ

  $('.player__flow').click(function() {
  
          var media = $(this).siblings('video');
  
          media.addClass('managed');
  
          $(this).text(function(i, v) {
              return v === 'PLAY' ? 'PAUSE' : 'PLAY';
          });
  
          if ($(this).hasClass('active')) {
              $(this).removeClass('active');
          } else {
              $(this).addClass('active');
          } 
  
          if (media[0].busy) media[0].pause();
          else media[0].play();
      });
  

  31 Tháng Mười, 2017 lúc 3. 39 giờ tối

  Shikkediel

  người tham gia

  Tôi nghĩ rằng bạn muốn sử dụng một cái gì đó như thế này sau đó, điều này sẽ không bao giờ trộn lẫn trạng thái hoạt động với các nút

  $('.player__flow').click(function() {
  
    var media = $(this).siblings('video');
  
    media.addClass('managed');
  
    if (media[0].busy) {
    media[0].pause();
    $(this).text('PLAY').removeClass('active');
    }
    else {
    media[0].play();
    $(this).text('PAUSE').addClass('active');
    }
  });
  

  Và phần

  $(document).ready(function() {
      // Get media - with autoplay disabled (audio or video).
      var media = $('video').not("[autoplay='autoplay']");
      var tolerancePixel = 200;
  
      function checkMedia(){
          // Get current browser top and bottom.
          var scrollTop = $(window).scrollTop() + tolerancePixel;
          var scrollBottom = $(window).scrollTop() + $(window).height() - tolerancePixel;
  
          media.each(function(index, el) {
              var yTopMedia = $(this).offset().top;
              var yBottomMedia = $(this).height() + yTopMedia;
  
              // Don't play video when outside of viewport.
              if(scrollTop < yBottomMedia && scrollBottom > yTopMedia){
                  $(this).get(0).play();
              } else {
                  $(this).get(0).pause();
              }
          });
      }
      $(document).on('scroll', checkMedia);
  });
  

  5 thậm chí có thể không cần thiết ở đó…

  Chỉnh sửa - Tôi cũng đã điều chỉnh một chút phần này của tập lệnh để nó chỉ hiển thị các nút sau khi chúng thực sự có thể phát video (một video dài hơn vẫn đang tải có thể khiến các nút không đồng bộ)

  target.each(function() {
  
    $(this).on('canplay', function() {
  
      $(this).siblings('button').show();
    })
    .on('ended', function() {
  
      $(this).siblings('.flow').text('PLAY');
    });
  });
  

  Và thêm một chút phong cách

  button {
  display: none;
  }
  

  31 Tháng 10, 2017 lúc 6. 19 giờ tối

  Shikkediel

  người tham gia

  Không thể chỉnh sửa bản chỉnh sửa đó nữa nhưng tôi đã có cảm hứng để đại tu hoàn toàn thứ này để hoạt động với một hình ảnh nền duy nhất cho các nút. Và đã thêm một số nội dung để làm cho nó chắc chắn hơn khi tải video

  1 tháng 11, 2017 lúc 3. 23 giờ sáng

  nghiệt ngã

  người tham gia

  Vâng, đôi khi JS của tôi có thể hơi hoang dã và 'bất cứ điều gì cần thiết để nó hoạt động'. Vì vậy, nếu/khác là một chút OTT. Tôi cho rằng trong một tình huống khác, tôi có thể chỉ cần nói

  $(document).ready(function() {
      // Get media - with autoplay disabled (audio or video).
      var media = $('video').not("[autoplay='autoplay']");
      var tolerancePixel = 200;
  
      function checkMedia(){
          // Get current browser top and bottom.
          var scrollTop = $(window).scrollTop() + tolerancePixel;
          var scrollBottom = $(window).scrollTop() + $(window).height() - tolerancePixel;
  
          media.each(function(index, el) {
              var yTopMedia = $(this).offset().top;
              var yBottomMedia = $(this).height() + yTopMedia;
  
              // Don't play video when outside of viewport.
              if(scrollTop < yBottomMedia && scrollBottom > yTopMedia){
                  $(this).get(0).play();
              } else {
                  $(this).get(0).pause();
              }
          });
      }
      $(document).on('scroll', checkMedia);
  });
  

  9 'thêm lớp này, sau đó

  $(this).text(function(i, v) {
      return v === 'MUTE' ? 'UNMUTE' : 'MUTE';
  });
  

  0 lớp mà nó đã thêm rồi, xóa nó đi.. nhưng sau đó, một lần nữa tôi cho rằng điều đó giống như

  $(document).ready(function() {
      // Get media - with autoplay disabled (audio or video).
      var media = $('video').not("[autoplay='autoplay']");
      var tolerancePixel = 200;
  
      function checkMedia(){
          // Get current browser top and bottom.
          var scrollTop = $(window).scrollTop() + tolerancePixel;
          var scrollBottom = $(window).scrollTop() + $(window).height() - tolerancePixel;
  
          media.each(function(index, el) {
              var yTopMedia = $(this).offset().top;
              var yBottomMedia = $(this).height() + yTopMedia;
  
              // Don't play video when outside of viewport.
              if(scrollTop < yBottomMedia && scrollBottom > yTopMedia){
                  $(this).get(0).play();
              } else {
                  $(this).get(0).pause();
              }
          });
      }
      $(document).on('scroll', checkMedia);
  });
  

  7

  Điều đó có vẻ tuyệt vời trở lại, tôi sẽ thực hiện nó ngay hôm nay. Khía cạnh tải là một ý tưởng tốt. Tôi nhận thấy trên iOS, video không hiển thị trên ví dụ của tôi nhưng tôi nghĩ đó là vì tôi cần thêm một hình ảnh

  $(this).text(function(i, v) {
      return v === 'MUTE' ? 'UNMUTE' : 'MUTE';
  });
  

  2 vào phần tử

  $(document).ready(function() {
      // Get media - with autoplay disabled (audio or video).
      var media = $('video').not("[autoplay='autoplay']");
      var tolerancePixel = 200;
  
      function checkMedia(){
          // Get current browser top and bottom.
          var scrollTop = $(window).scrollTop() + tolerancePixel;
          var scrollBottom = $(window).scrollTop() + $(window).height() - tolerancePixel;
  
          media.each(function(index, el) {
              var yTopMedia = $(this).offset().top;
              var yBottomMedia = $(this).height() + yTopMedia;
  
              // Don't play video when outside of viewport.
              if(scrollTop < yBottomMedia && scrollBottom > yTopMedia){
                  $(this).get(0).play();
              } else {
                  $(this).get(0).pause();
              }
          });
      }
      $(document).on('scroll', checkMedia);
  });
  

  0. Tôi nghĩ rằng các yếu tố

  $(document).ready(function() {
      // Get media - with autoplay disabled (audio or video).
      var media = $('video').not("[autoplay='autoplay']");
      var tolerancePixel = 200;
  
      function checkMedia(){
          // Get current browser top and bottom.
          var scrollTop = $(window).scrollTop() + tolerancePixel;
          var scrollBottom = $(window).scrollTop() + $(window).height() - tolerancePixel;
  
          media.each(function(index, el) {
              var yTopMedia = $(this).offset().top;
              var yBottomMedia = $(this).height() + yTopMedia;
  
              // Don't play video when outside of viewport.
              if(scrollTop < yBottomMedia && scrollBottom > yTopMedia){
                  $(this).get(0).play();
              } else {
                  $(this).get(0).pause();
              }
          });
      }
      $(document).on('scroll', checkMedia);
  });
  

  0 thường sử dụng khung hình đầu tiên nhưng có lẽ nó không tự động làm điều đó trên iOS

  Làm cách nào để hiển thị nút phát trên video trong HTML?

  Phương thức phát DOM âm thanh/video HTML () . Mẹo. Sử dụng phương thức pause() để tạm dừng âm thanh/video hiện tại. The play() method starts playing the current audio or video. Tip: Use the pause() method to pause the current audio/video.

  Làm cách nào để đặt các điều khiển trong video trong HTML?

  Thuộc tính điều khiển là thuộc tính boolean. Khi xuất hiện, nó chỉ định rằng các điều khiển video sẽ được hiển thị. .

  Tạm ngừng

  tìm kiếm

  Âm lượng

  chuyển đổi toàn màn hình

  Chú thích/Phụ đề (nếu có)

  Theo dõi (nếu có)

  Làm cách nào để tạm dừng video khi nhấp vào nút phát video khác?

  getElementById("video-1"); . getElementById("video-2"); . onplay = function() { vid2. tạm dừng();

  Làm cách nào để tạo video phản hồi trong html5?

  Thẻ video HTML . Tất cả những gì bạn cần làm là đặt chiều rộng thành 100% và chiều cao thành tự động .