programming html

Hướng dẫn html video loop not working - vòng lặp video html không hoạt động

Tôi có một video làm nền cho một trang web và tôi đang cố gắng đưa nó vào vòng lặp. Đây là mã:

Mặc dù tôi đã nói với video để lặp, nhưng nó không. Tôi cũng đã cố gắng đưa nó vào vòng lặp với thuộc tính onended [theo chủ đề hỗ trợ Mozilla này, tôi cũng đã thử bit của jQuery đó]. Không có gì đã làm việc cho đến nay. Đó là một vấn đề với Chrome, hay mã của tôi?

Edit:

Tôi đã kiểm tra các sự kiện mạng và người đứng đầu một bản sao làm việc [//fhsclock-labs.heroku.com/no-iolence] so với ứng dụng tôi đang cố gắng làm việc. Sự khác biệt là bản sao làm việc đang phục vụ video từ một tài sản tĩnh trên Heroku [thông qua vecni, rõ ràng], trong khi của tôi đang phục vụ từ Gridfs [MongoDB].

Tab mạng của Thanh tra Chrome cho thấy trong ứng dụng của tôi, video được yêu cầu ba lần. Một lần trạng thái là "đang chờ xử lý", lần thứ hai là "bị hủy" và lần cuối cùng là 200 OK. Bản sao làm việc chỉ hiển thị hai yêu cầu, trạng thái của một người đang chờ xử lý và cái còn lại là 206 nội dung một phần. Tuy nhiên, sau khi video phát một lần, yêu cầu đó thay đổi thành "bị hủy" và nó đưa ra một yêu cầu khác cho video đó. Trong ứng dụng của tôi, điều đó không xảy ra.

Đối với loại, trong ứng dụng của tôi, hai là "không xác định" và "video/mp4" khác [mà nó được cho là]. Trong ứng dụng làm việc, tất cả các yêu cầu là "Video/MP4".

Ngoài ra, tôi đang nhận được các cảnh báo ____99 trong bảng điều khiển.

Tôi không thực sự hoàn toàn chắc chắn bắt đầu từ đâu về điều này. Tôi tin rằng vấn đề này là phía máy chủ, vì phục vụ tệp vì tài sản tĩnh hoạt động tốt. Có thể là máy chủ không gửi đúng loại nội dung. Nó có thể là một vấn đề với Gridfs. Tôi không biết.

Ở bất cứ giá nào, nguồn là ở đây. Bất kỳ cái nhìn sâu sắc mà bạn có thể cung cấp đều được đánh giá cao.

❮ Thẻ HTML

Thí dụ

Một video sẽ bắt đầu lại, mỗi khi nó kết thúc:

& nbsp; & nbsp; & nbsp; Trình duyệt của bạn không hỗ trợ thẻ video.
 
 
  Your browser does not support the video tag.

Hãy tự mình thử »

Định nghĩa và cách sử dụng

Thuộc tính 


  
  
  
    Your browser doesn't support HTML video. Here is a
    link to the video instead.
0 là một thuộc tính Boolean.

Khi có mặt, nó chỉ định rằng video sẽ bắt đầu lại, mỗi khi nó kết thúc.

Hỗ trợ trình duyệt

Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính.

Thuộc tính
vòng4.0 9.0 11.0 3.1 & nbsp;11.5

Cú pháp

❮ Thẻ HTML


Nếu lỗi trình duyệt của bạn "Tệp video HTML5 không tìm thấy", điều đó có nghĩa là trình duyệt của bạn không cập nhật hoặc trang web không có codec video phù hợp. Nó sẽ giúp nếu bạn liên lạc với nhà phát triển để giải quyết vấn đề và cài đặt tất cả các codec cần thiết. , Jul 10, 2019 Jul 10, 2019

Làm cách nào để tạo một video tự động và vòng lặp trong HTML? • Community Expert , Jul 10, 2019 Jul 10, 2019

Hoàn thành khóa học HTML/CSS 2022 Autoplay được sử dụng để bắt đầu video khi tải video và trang. Thuộc tính vòng lặp là một thuộc tính Boolean. Khi có mặt, nó chỉ định rằng video sẽ bắt đầu lại, mỗi khi nó kết thúc. Thuộc tính vòng lặp nên làm điều đó.

& nbsp; & nbsp; & nbsp; & nbsp;

Một tiện ích mở rộng như thế này sẽ được sử dụng cho bạn: & nbsp; Video Magic Magic

Một tiện ích mở rộng như thế này sẽ được sử dụng cho bạn: & nbsp; Video Magic Magic

& nbsp; & nbsp; & nbsp; & nbsp;

...

Phần tử 


  
  
  
    Your browser doesn't support HTML video. Here is a
    link to the video instead.
1 HTML nhúng một trình phát phương tiện hỗ trợ phát lại video vào tài liệu. Bạn cũng có thể sử dụng 

  
  
  
    Your browser doesn't support HTML video. Here is a
    link to the video instead.
1 cho nội dung âm thanh, nhưng phần tử 

  
  
  
    Your browser doesn't support HTML video. Here is a
    link to the video instead.
3 có thể cung cấp trải nghiệm người dùng phù hợp hơn.

Phần tử 


  
  
  
    Your browser doesn't support HTML video. Here is a
    link to the video instead.
1 HTML nhúng một trình phát phương tiện hỗ trợ phát lại video vào tài liệu. Bạn cũng có thể sử dụng 

  
  
  
    Your browser doesn't support HTML video. Here is a
    link to the video instead.
1 cho nội dung âm thanh, nhưng phần tử 

  
  
  
    Your browser doesn't support HTML video. Here is a
    link to the video instead.
3 có thể cung cấp trải nghiệm người dùng phù hợp hơn.

  
  
  
    Your browser doesn't support HTML video. Here is a
    link to the video instead.
1 HTML element embeds a media player which supports video playback into the document. You can use 

  
  
  
    Your browser doesn't support HTML video. Here is a
    link to the video instead.
1 for audio content as well, but the 

  
  
  
    Your browser doesn't support HTML video. Here is a
    link to the video instead.
3 element may provide a more appropriate user experience.

Thử nó

Ví dụ trên cho thấy cách sử dụng đơn giản của phần tử 


  
  
  
    Your browser doesn't support HTML video. Here is a
    link to the video instead.
1. Theo cách tương tự như phần tử 

  
  
  
    Your browser doesn't support HTML video. Here is a
    link to the video instead.
5, chúng tôi bao gồm một đường dẫn đến phương tiện mà chúng tôi muốn hiển thị bên trong thuộc tính 

  
  
  
    Your browser doesn't support HTML video. Here is a
    link to the video instead.
6; Chúng tôi có thể bao gồm các thuộc tính khác để chỉ định thông tin như chiều rộng và chiều cao video, cho dù chúng tôi muốn nó tự động phát và lặp, cho dù chúng tôi muốn hiển thị các điều khiển video mặc định của trình duyệt, v.v.

Nội dung bên trong các thẻ mở và đóng 


  
  
  
    Your browser doesn't support HTML video. Here is a
    link to the video instead.
7 được hiển thị dưới dạng dự phòng trong các trình duyệt không hỗ trợ phần tử.

Thuộc tính

Giống như tất cả các yếu tố HTML khác, yếu tố này hỗ trợ các thuộc tính toàn cầu.


  
  
  
    Your browser doesn't support HTML video. Here is a
    link to the video instead.
8

Một thuộc tính boolean; Nếu được chỉ định, video sẽ tự động bắt đầu phát lại ngay khi có thể làm như vậy mà không dừng để hoàn thành tải dữ liệu.

Lưu ý: Các trang web tự động phát âm thanh [hoặc video có bản nhạc âm thanh] có thể là một trải nghiệm khó chịu cho người dùng, vì vậy nên tránh khi có thể. Nếu bạn phải cung cấp chức năng Autoplay, bạn nên thực hiện chọn tham gia [yêu cầu người dùng cụ thể bật nó]. Tuy nhiên, điều này có thể hữu ích khi tạo các yếu tố phương tiện có nguồn sẽ được đặt sau, dưới sự kiểm soát của người dùng. Xem Hướng dẫn Autoplay của chúng tôi để biết thêm thông tin về cách sử dụng autoplay đúng cách. Sites that automatically play audio [or videos with an audio track] can be an unpleasant experience for users, so should be avoided when possible. If you must offer autoplay functionality, you should make it opt-in [requiring a user to specifically enable it]. However, this can be useful when creating media elements whose source will be set at a later time, under user control. See our autoplay guide for additional information about how to properly use autoplay.

Để vô hiệu hóa video Autoplay, 


  
  
  
    Your browser doesn't support HTML video. Here is a
    link to the video instead.
9 sẽ không hoạt động; Video sẽ tự động phát nếu thuộc tính có trong thẻ 

  
  
  
    Your browser doesn't support HTML video. Here is a
    link to the video instead.
1. Để loại bỏ autoplay, thuộc tính cần phải được loại bỏ hoàn toàn.

Trong một số trình duyệt [ví dụ: Chrome 70.0] Autoplay không hoạt động nếu không có thuộc tính 

const elem = document.querySelector["video"];

elem.audioTracks.onaddtrack = [event] => {
  trackEditor.addTrack[event.track];
};

elem.audioTracks.onremovetrack = [event] => {
  trackEditor.removeTrack[event.track];
};
1.

const elem = document.querySelector["video"];

elem.audioTracks.onaddtrack = [event] => {
  trackEditor.addTrack[event.track];
};

elem.audioTracks.onremovetrack = [event] => {
  trackEditor.removeTrack[event.track];
};
2Experimental Experimental

Một thuộc tính boolean mà nếu 

const elem = document.querySelector["video"];

elem.audioTracks.onaddtrack = [event] => {
  trackEditor.addTrack[event.track];
};

elem.audioTracks.onremovetrack = [event] => {
  trackEditor.removeTrack[event.track];
};
3 chỉ ra rằng phần tử sẽ tự động chuyển đổi chế độ hình ảnh trong ảnh khi người dùng chuyển qua lại giữa tài liệu này và một tài liệu hoặc ứng dụng khác.

const elem = document.querySelector["video"];

elem.audioTracks.onaddtrack = [event] => {
  trackEditor.addTrack[event.track];
};

elem.audioTracks.onremovetrack = [event] => {
  trackEditor.removeTrack[event.track];
};
4

Nếu thuộc tính này có mặt, trình duyệt sẽ cung cấp các điều khiển để cho phép người dùng điều khiển phát lại video, bao gồm âm lượng, tìm kiếm và tạm dừng/tiếp tục phát lại.

const elem = document.querySelector["video"];

elem.audioTracks.onaddtrack = [event] => {
  trackEditor.addTrack[event.track];
};

elem.audioTracks.onremovetrack = [event] => {
  trackEditor.removeTrack[event.track];
};
5ExperimentalNon-standard Experimental Non-standard

Thuộc tính 

const elem = document.querySelector["video"];

elem.audioTracks.onaddtrack = [event] => {
  trackEditor.addTrack[event.track];
};

elem.audioTracks.onremovetrack = [event] => {
  trackEditor.removeTrack[event.track];
};
5, khi được chỉ định, giúp trình duyệt chọn những điều khiển nào để hiển thị cho phần tử 
const elem = document.querySelector["video"];

elem.audioTracks.onaddtrack = [event] => {
  trackEditor.addTrack[event.track];
};

elem.audioTracks.onremovetrack = [event] => {
  trackEditor.removeTrack[event.track];
};
7 bất cứ khi nào trình duyệt hiển thị bộ điều khiển của riêng mình [nghĩa là khi thuộc tính 
const elem = document.querySelector["video"];

elem.audioTracks.onaddtrack = [event] => {
  trackEditor.addTrack[event.track];
};

elem.audioTracks.onremovetrack = [event] => {
  trackEditor.removeTrack[event.track];
};
4 được chỉ định].

Các giá trị được phép là 

const elem = document.querySelector["video"];

elem.audioTracks.onaddtrack = [event] => {
  trackEditor.addTrack[event.track];
};

elem.audioTracks.onremovetrack = [event] => {
  trackEditor.removeTrack[event.track];
};
9, 
AddType video/ogg .ogm
AddType video/ogg .ogv
AddType video/ogg .ogg
0 và 
AddType video/ogg .ogm
AddType video/ogg .ogv
AddType video/ogg .ogg
1.

Sử dụng thuộc tính 

AddType video/ogg .ogm
AddType video/ogg .ogv
AddType video/ogg .ogg
2 nếu bạn muốn vô hiệu hóa chế độ hình ảnh trong ảnh [và điều khiển].

AddType video/ogg .ogm
AddType video/ogg .ogv
AddType video/ogg .ogg
3

Thuộc tính được liệt kê này cho biết có nên sử dụng CORS để tìm nạp video liên quan hay không. Tài nguyên hỗ trợ CORS có thể được sử dụng lại trong phần tử 

AddType video/ogg .ogm
AddType video/ogg .ogv
AddType video/ogg .ogg
4 mà không bị nhiễm độc. Các giá trị được phép là:

AddType video/ogg .ogm
AddType video/ogg .ogv
AddType video/ogg .ogg
5

Gửi một yêu cầu có nguồn gốc chéo mà không cần chứng chỉ. Nói cách khác, nó gửi tiêu đề HTTP 

AddType video/ogg .ogm
AddType video/ogg .ogv
AddType video/ogg .ogg
6 mà không cần cookie, chứng chỉ X.509 hoặc thực hiện xác thực cơ bản HTTP. Nếu máy chủ không cung cấp thông tin đăng nhập cho trang web gốc [bằng cách không đặt tiêu đề 
AddType video/ogg .ogm
AddType video/ogg .ogv
AddType video/ogg .ogg
7 HTTP], tài nguyên sẽ bị ô nhiễm và việc sử dụng nó bị hạn chế.

AddType video/ogg .ogm
AddType video/ogg .ogv
AddType video/ogg .ogg
8

Gửi một yêu cầu có nguồn gốc chéo với thông tin xác thực. Nói cách khác, nó gửi tiêu đề HTTP 

AddType video/ogg .ogm
AddType video/ogg .ogv
AddType video/ogg .ogg
6 với cookie, chứng chỉ hoặc thực hiện xác thực cơ bản HTTP. Nếu máy chủ không cung cấp thông tin đăng nhập cho trang web gốc [thông qua tiêu đề 
AddType video/webm .webm
0 HTTP], tài nguyên sẽ bị nhiễm độc và việc sử dụng nó bị hạn chế.

Khi không có, tài nguyên được tìm nạp mà không có yêu cầu CORS [tức là mà không gửi tiêu đề 

AddType video/ogg .ogm
AddType video/ogg .ogv
AddType video/ogg .ogg
6 HTTP], ngăn chặn việc sử dụng không bị lỗi trong các yếu tố ____34. Nếu không hợp lệ, nó được xử lý như thể từ khóa được liệt kê 
AddType video/ogg .ogm
AddType video/ogg .ogv
AddType video/ogg .ogg
5 được sử dụng. Xem các thuộc tính CASS Cài đặt để biết thêm thông tin.

AddType video/ogg .ogm
AddType video/ogg .ogv
AddType video/ogg .ogg
2Experimental Experimental

Ngăn chặn trình duyệt đề xuất menu ngữ cảnh hình ảnh trong ảnh hoặc tự động yêu cầu hình ảnh trong ảnh trong một số trường hợp.

AddType video/webm .webm
5Experimental Experimental

Một thuộc tính boolean được sử dụng để vô hiệu hóa khả năng phát lại từ xa trong các thiết bị được gắn bằng dây có dây [HDMI, DVI, v.v.] và các công nghệ không dây [Miracast, Chromecast, DLNA, AirPlay, v.v.].

Trong Safari, bạn có thể sử dụng 

AddType video/webm .webm
6 như một dự phòng.

AddType video/webm .webm
7

Chiều cao của khu vực hiển thị của video, trong các pixel CSS [chỉ có giá trị tuyệt đối; không có tỷ lệ phần trăm].


  
  
  
    Your browser doesn't support HTML video. Here is a
    link to the video instead.
0

Một thuộc tính boolean; Nếu được chỉ định, trình duyệt sẽ tự động tìm kiếm trở lại bắt đầu khi đến cuối video.

const elem = document.querySelector["video"];

elem.audioTracks.onaddtrack = [event] => {
  trackEditor.addTrack[event.track];
};

elem.audioTracks.onremovetrack = [event] => {
  trackEditor.removeTrack[event.track];
};
1

Một thuộc tính Boolean cho biết cài đặt mặc định của âm thanh có trong video. Nếu được thiết lập, âm thanh ban đầu sẽ bị im lặng. Giá trị mặc định của nó là 





  Sorry, your browser doesn't support embedded videos, but don't worry, you can
  download it
  and watch it with your favorite video player!
0, có nghĩa là âm thanh sẽ được phát khi video được phát.





  Sorry, your browser doesn't support embedded videos, but don't worry, you can
  download it
  and watch it with your favorite video player!
1

Một thuộc tính Boolean chỉ ra rằng video sẽ được phát "nội tuyến", nằm trong khu vực phát lại của phần tử. Lưu ý rằng sự vắng mặt của thuộc tính này không ngụ ý rằng video sẽ luôn được phát trên toàn màn hình.





  Sorry, your browser doesn't support embedded videos, but don't worry, you can
  download it
  and watch it with your favorite video player!
2

Một URL cho một hình ảnh được hiển thị trong khi video đang tải xuống. Nếu thuộc tính này không được chỉ định, không có gì được hiển thị cho đến khi khung đầu tiên có sẵn, thì khung đầu tiên được hiển thị dưới dạng khung áp phích.





  Sorry, your browser doesn't support embedded videos, but don't worry, you can
  download it
  and watch it with your favorite video player!
3

Thuộc tính được liệt kê này nhằm cung cấp một gợi ý cho trình duyệt về những gì tác giả nghĩ sẽ dẫn đến trải nghiệm người dùng tốt nhất liên quan đến nội dung nào được tải trước khi video được phát. Nó có thể có một trong các giá trị sau:

  • 



  Sorry, your browser doesn't support embedded videos, but don't worry, you can
  download it
  and watch it with your favorite video player!
    4: Cho biết rằng video không nên được tải sẵn.
  • 



  Sorry, your browser doesn't support embedded videos, but don't worry, you can
  download it
  and watch it with your favorite video player!
    5: Chỉ ra rằng chỉ có siêu dữ liệu video [ví dụ: độ dài] được tìm nạp.
  • 



  Sorry, your browser doesn't support embedded videos, but don't worry, you can
  download it
  and watch it with your favorite video player!
    6: Cho biết rằng toàn bộ tệp video có thể được tải xuống, ngay cả khi người dùng không dự kiến ​​sẽ sử dụng nó.
  • Chuỗi trống: Từ đồng nghĩa của giá trị 
    



  Sorry, your browser doesn't support embedded videos, but don't worry, you can
  download it
  and watch it with your favorite video player!
    6.

Giá trị mặc định là khác nhau cho mỗi trình duyệt. Thông số kỹ thuật khuyên nó sẽ được đặt thành 





  Sorry, your browser doesn't support embedded videos, but don't worry, you can
  download it
  and watch it with your favorite video player!
5.

Note:

  • Thuộc tính 
    
  
  
  
    Your browser doesn't support HTML video. Here is a
    link to the video instead.
    8 được ưu tiên hơn 
    



  Sorry, your browser doesn't support embedded videos, but don't worry, you can
  download it
  and watch it with your favorite video player!
    3. Nếu 
    
  
  
  
    Your browser doesn't support HTML video. Here is a
    link to the video instead.
    8 được chỉ định, trình duyệt rõ ràng sẽ cần bắt đầu tải xuống video để phát lại.
  • Thông số kỹ thuật không buộc trình duyệt phải tuân theo giá trị của thuộc tính này; Nó chỉ là một gợi ý.


  
  
  
    Your browser doesn't support HTML video. Here is a
    link to the video instead.
6

URL của video để nhúng. Đây là tùy chọn; Thay vào đó, bạn có thể sử dụng phần tử 





  
  
  

  Sorry, your browser doesn't support embedded videos, but don't worry, you can
  
    download the MP4
  
  and watch it with your favorite video player!
3 trong khối video để chỉ định video để nhúng.





  
  
  

  Sorry, your browser doesn't support embedded videos, but don't worry, you can
  
    download the MP4
  
  and watch it with your favorite video player!
4

Chiều rộng của vùng hiển thị của video, trong các pixel CSS [chỉ có giá trị tuyệt đối; không có tỷ lệ phần trăm].

Sự kiện

Ghi chú sử dụng

Các trình duyệt không hỗ trợ cùng một định dạng video; Bạn có thể cung cấp nhiều nguồn bên trong các yếu tố 





  
  
  

  Sorry, your browser doesn't support embedded videos, but don't worry, you can
  
    download the MP4
  
  and watch it with your favorite video player!
3 lồng nhau và sau đó trình duyệt sẽ sử dụng nguồn đầu tiên mà nó hiểu.


  
  
  
    Your browser doesn't support HTML video. Here is a
    link to the video instead.

Chúng tôi cung cấp một hướng dẫn thực chất và kỹ lưỡng về các loại tệp phương tiện và hướng dẫn cho các codec được hỗ trợ cho video. Cũng có sẵn là một hướng dẫn cho các codec âm thanh có thể được sử dụng với chúng.

Ghi chú sử dụng khác:

  • Nếu bạn không chỉ định thuộc tính 
    const elem = document.querySelector["video"];

elem.audioTracks.onaddtrack = [event] => {
  trackEditor.addTrack[event.track];
};

elem.audioTracks.onremovetrack = [event] => {
  trackEditor.removeTrack[event.track];
};
    4, video sẽ không bao gồm các điều khiển mặc định của trình duyệt; Bạn có thể tạo các điều khiển tùy chỉnh của riêng mình bằng JavaScript và API 
    



  
  
  

  Sorry, your browser doesn't support embedded videos, but don't worry, you can
  
    download the MP4
  
  and watch it with your favorite video player!
    7. Xem Tạo một trình phát video trình duyệt chéo để biết thêm chi tiết.
  • Để cho phép kiểm soát chính xác nội dung video [và âm thanh] của bạn, 
    



  
  
  

  Sorry, your browser doesn't support embedded videos, but don't worry, you can
  
    download the MP4
  
  and watch it with your favorite video player!
    7S bắn nhiều sự kiện khác nhau. Ngoài việc cung cấp khả năng kiểm soát, các sự kiện này cho phép bạn theo dõi tiến trình của cả tải xuống và phát lại phương tiện, cũng như trạng thái phát lại và vị trí.
  • Bạn có thể sử dụng thuộc tính 
    



  
  
  

  Sorry, your browser doesn't support embedded videos, but don't worry, you can
  
    download the MP4
  
  and watch it with your favorite video player!
    9 để điều chỉnh vị trí của video trong khung của phần tử và thuộc tính 
    14
00:03:14 --> 00:03:18
[Dramatic rock music]

15
00:03:19 --> 00:03:21
[whispering] What's that off in the distance?

16
00:03:22 --> 00:03:24
It's… it's a…

16 00:03:25 --> 00:03:32
[Loud thumping]
[Dishes clattering]
    0 để kiểm soát cách điều chỉnh kích thước của video để phù hợp với khung.
  • Để hiển thị phụ đề/chú thích cùng với video của bạn, bạn có thể sử dụng một số JavaScript cùng với phần tử 
    14
00:03:14 --> 00:03:18
[Dramatic rock music]

15
00:03:19 --> 00:03:21
[whispering] What's that off in the distance?

16
00:03:22 --> 00:03:24
It's… it's a…

16 00:03:25 --> 00:03:32
[Loud thumping]
[Dishes clattering]
    1 và định dạng WebVTT. Xem thêm chú thích và phụ đề vào video HTML để biết thêm thông tin.
  • Bạn có thể phát các tệp âm thanh bằng phần tử 
    
  
  
  
    Your browser doesn't support HTML video. Here is a
    link to the video instead.
    1. Điều này có thể hữu ích nếu, ví dụ, bạn cần thực hiện âm thanh với bảng điểm WebVTT, vì phần tử 
    
  
  
  
    Your browser doesn't support HTML video. Here is a
    link to the video instead.
    3 không cho phép các chú thích bằng WebVTT.
  • Để kiểm tra nội dung dự phòng trên các trình duyệt hỗ trợ phần tử, bạn có thể thay thế 
    
  
  
  
    Your browser doesn't support HTML video. Here is a
    link to the video instead.
    1 bằng một phần tử không tồn tại như 
    14
00:03:14 --> 00:03:18
[Dramatic rock music]

15
00:03:19 --> 00:03:21
[whispering] What's that off in the distance?

16
00:03:22 --> 00:03:24
It's… it's a…

16 00:03:25 --> 00:03:32
[Loud thumping]
[Dishes clattering]
    5.

Một nguồn thông tin chung tốt về việc sử dụng HTML 


  
  
  
    Your browser doesn't support HTML video. Here is a
    link to the video instead.
1 là hướng dẫn của người mới bắt đầu nội dung video và âm thanh.

Kiểu dáng với CSS

Phần tử 


  
  
  
    Your browser doesn't support HTML video. Here is a
    link to the video instead.
1 là một phần tử được thay thế - giá trị ____78 của nó là 
14
00:03:14 --> 00:03:18
[Dramatic rock music]

15
00:03:19 --> 00:03:21
[whispering] What's that off in the distance?

16
00:03:22 --> 00:03:24
It's… it's a…

16 00:03:25 --> 00:03:32
[Loud thumping]
[Dishes clattering]
9 theo mặc định, nhưng chiều rộng và chiều cao mặc định của nó trong chế độ xem được xác định bởi video được nhúng.

Không có cân nhắc đặc biệt cho kiểu dáng 


  
  
  
    Your browser doesn't support HTML video. Here is a
    link to the video instead.
1; Một chiến lược phổ biến là cung cấp cho nó giá trị 
14
00:03:14 --> 00:03:18
[Dramatic rock music]

15
00:03:19 --> 00:03:21
[whispering] What's that off in the distance?

16
00:03:22 --> 00:03:24
It's… it's a…

16 00:03:25 --> 00:03:32
[Loud thumping]
[Dishes clattering]
8 là onended2 để giúp định vị, kích thước, v.v., sau đó cung cấp thông tin kiểu dáng và bố cục theo yêu cầu. Khái niệm cơ bản về kiểu máy chơi video cung cấp một số kỹ thuật tạo kiểu hữu ích.

Phát hiện bổ sung và loại bỏ theo dõi

Bạn có thể phát hiện khi các bản nhạc được thêm vào và xóa khỏi phần tử 


  
  
  
    Your browser doesn't support HTML video. Here is a
    link to the video instead.
1 bằng các sự kiện onended4 và onended5. Tuy nhiên, những sự kiện này không được gửi trực tiếp đến chính phần tử 

  
  
  
    Your browser doesn't support HTML video. Here is a
    link to the video instead.
1. Thay vào đó, họ được gửi đến đối tượng danh sách theo dõi trong phần tử 

  
  
  
    Your browser doesn't support HTML video. Here is a
    link to the video instead.
1 của 

  
  
  
    Your browser doesn't support HTML video. Here is a
    link to the video instead.
1 tương ứng với loại bản nhạc được thêm vào phần tử:

onended9

Một Resource interpreted as Other but transferred with MIME type undefined.0 chứa tất cả các bản nhạc âm thanh của yếu tố phương tiện. Bạn có thể thêm trình nghe cho onended4 vào đối tượng này để được cảnh báo khi các bản nhạc âm thanh mới được thêm vào phần tử.

Resource interpreted as Other but transferred with MIME type undefined.2

Thêm trình nghe onended4 vào đối tượng Resource interpreted as Other but transferred with MIME type undefined.4 này để được thông báo khi các bản nhạc video được thêm vào phần tử.

Resource interpreted as Other but transferred with MIME type undefined.5

Thêm trình nghe sự kiện onended4 vào Resource interpreted as Other but transferred with MIME type undefined.7 này để được thông báo khi các bản nhạc văn bản mới được thêm vào phần tử.

Ví dụ: để phát hiện khi các rãnh âm thanh được thêm hoặc xóa khỏi phần tử 


  
  
  
    Your browser doesn't support HTML video. Here is a
    link to the video instead.
1, bạn có thể sử dụng mã như thế này:

const elem = document.querySelector["video"];

elem.audioTracks.onaddtrack = [event] => {
  trackEditor.addTrack[event.track];
};

elem.audioTracks.onremovetrack = [event] => {
  trackEditor.removeTrack[event.track];
};

Mã này theo dõi các bản nhạc âm thanh được thêm và xóa khỏi phần tử và gọi chức năng giả thuyết trên trình chỉnh sửa theo dõi để đăng ký và xóa bản nhạc khỏi danh sách các bản nhạc có sẵn của trình soạn thảo.

Bạn cũng có thể sử dụng Resource interpreted as Other but transferred with MIME type undefined.9 để nghe các sự kiện onended4 và onended5.

Hỗ trợ máy chủ cho video

Nếu loại MIME cho video không được đặt chính xác trên máy chủ, video có thể không hiển thị hoặc hiển thị hộp màu xám có chứa X [nếu JavaScript được bật].

Nếu bạn sử dụng Apache Web Server để phục vụ video OGG Theora, bạn có thể khắc phục sự cố này bằng cách thêm các phần mở rộng loại tệp video vào loại MIME "Video/OGG". Các tiện ích mở rộng loại tệp video phổ biến nhất là ".Ogm", ".Ogv" hoặc ".Ogg". Để thực hiện việc này, hãy chỉnh sửa tệp "mime.types" trong "/etc/apache" hoặc sử dụng Chỉ thị cấu hình 


  
  
  
    Your browser doesn't support HTML video. Here is a
    link to the video instead.
02 trong 

  
  
  
    Your browser doesn't support HTML video. Here is a
    link to the video instead.
03.

AddType video/ogg .ogm
AddType video/ogg .ogv
AddType video/ogg .ogg

Nếu bạn phục vụ video của mình dưới dạng webm, bạn có thể khắc phục sự cố này cho máy chủ Web Apache bằng cách thêm tiện ích mở rộng được sử dụng bởi các tệp video của bạn [" mime.types "Tệp trong"/etc/apache "hoặc thông qua Chỉ thị cấu hình" AddType "trong 


  
  
  
    Your browser doesn't support HTML video. Here is a
    link to the video instead.
03.

AddType video/webm .webm

Máy chủ web của bạn có thể cung cấp một giao diện dễ dàng để thay đổi cấu hình loại MIME cho các công nghệ mới cho đến khi bản cập nhật toàn cầu xảy ra một cách tự nhiên.

Ví dụ

Nguồn đơn

Ví dụ này phát một video khi được kích hoạt, cung cấp cho người dùng các điều khiển video mặc định của trình duyệt để kiểm soát phát lại.

HTML





  Sorry, your browser doesn't support embedded videos, but don't worry, you can
  download it
  and watch it with your favorite video player!

Kết quả

Cho đến khi video bắt đầu phát, hình ảnh được cung cấp trong thuộc tính 





  Sorry, your browser doesn't support embedded videos, but don't worry, you can
  download it
  and watch it with your favorite video player!
2 được hiển thị ở vị trí của nó. Nếu trình duyệt không hỗ trợ phát lại video, văn bản dự phòng sẽ được hiển thị.

Nhiều nguồn

Ví dụ này được xây dựng trên cái cuối cùng, cung cấp ba nguồn khác nhau cho các phương tiện truyền thông; Điều này cho phép video được xem bất kể các codec video nào được hỗ trợ bởi trình duyệt.

HTML





  
  
  

  Sorry, your browser doesn't support embedded videos, but don't worry, you can
  
    download the MP4
  
  and watch it with your favorite video player!

Kết quả

Cho đến khi video bắt đầu phát, hình ảnh được cung cấp trong thuộc tính 





  Sorry, your browser doesn't support embedded videos, but don't worry, you can
  download it
  and watch it with your favorite video player!
2 được hiển thị ở vị trí của nó. Nếu trình duyệt không hỗ trợ phát lại video, văn bản dự phòng sẽ được hiển thị.

Nhiều nguồn

Ví dụ này được xây dựng trên cái cuối cùng, cung cấp ba nguồn khác nhau cho các phương tiện truyền thông; Điều này cho phép video được xem bất kể các codec video nào được hỗ trợ bởi trình duyệt.

OGG đầu tiên được thử. Nếu điều đó không thể được chơi, thì Avi đã được thử. Cuối cùng, MP4 đã được thử. Thông báo dự phòng được hiển thị nếu phần tử video không được hỗ trợ, nhưng không phải nếu tất cả các nguồn đều thất bại.

Một số loại tệp phương tiện cho phép bạn cung cấp thông tin cụ thể hơn bằng tham số 


  
  
  
    Your browser doesn't support HTML video. Here is a
    link to the video instead.
06 như một phần của chuỗi loại của tệp. Một ví dụ tương đối đơn giản là 

  
  
  
    Your browser doesn't support HTML video. Here is a
    link to the video instead.
07, nói rằng tệp là video WebM sử dụng VP8 cho video và Vorbis cho âm thanh.

Nếu các dịch vụ chú thích tự động được sử dụng, điều quan trọng là phải xem xét nội dung được tạo để đảm bảo nó đại diện chính xác cho video nguồn.

Ngoài hộp thoại nói, phụ đề và bảng điểm cũng nên xác định các hiệu ứng âm nhạc và âm thanh truyền đạt thông tin quan trọng. Điều này bao gồm cảm xúc và giai điệu:

14
00:03:14 --> 00:03:18
[Dramatic rock music]

15
00:03:19 --> 00:03:21
[whispering] What's that off in the distance?

16
00:03:22 --> 00:03:24
It's… it's a…

16 00:03:25 --> 00:03:32
[Loud thumping]
[Dishes clattering]

Chú thích không nên cản trở chủ đề chính của video. Chúng có thể được định vị bằng cách sử dụng cài đặt CUE 


  
  
  
    Your browser doesn't support HTML video. Here is a
    link to the video instead.
09 VTT.

  • Định dạng theo dõi văn bản video Web [WebVTT]
  • Webaim: chú thích, bảng điểm và mô tả âm thanh
  • MDN Hiểu WCAG, Hướng dẫn 1.2 Giải thích
  • Hiểu tiêu chí thành công 1.2.1 | W3C Hiểu WCAG 2.0
  • Hiểu tiêu chí thành công 1.2.2 | W3C Hiểu WCAG 2.0

Tóm tắt kỹ thuật

Thông số kỹ thuật

Sự chỉ rõ
Tiêu chuẩn HTML # phần tử-video
# the-video-element

Tính tương thích của trình duyệt web

Bảng BCD chỉ tải trong trình duyệt

Xem thêm

Làm cách nào để lặp lại một video trong HTML?

Để tạo lặp lại vòng lặp video, tất cả những gì chúng ta cần làm là sửa đổi mã HTML.Để làm điều này, chúng ta có thể thêm từ, vòng lặp, vào thẻ video được sử dụng để hiển thị video.Điều này được hiển thị trong mã dưới đây.Vì vậy, tất cả những gì bạn phải làm để tạo một vòng lặp video lặp đi lặp lại là thêm từ, vòng lặp, vào thẻ video HTML.add the word, loop, to the video tag used to show the video. This is shown in the code below. So all you have to do to make a video loop over and over again repeatedly is to add the word, loop, to the HTML video tag.

Tại sao video của tôi không chạy trong HTML?

Nếu lỗi trình duyệt của bạn "Tệp video HTML5 không tìm thấy", điều đó có nghĩa là trình duyệt của bạn không cập nhật hoặc trang web không có codec video phù hợp.Nó sẽ giúp nếu bạn liên lạc với nhà phát triển để giải quyết vấn đề và cài đặt tất cả các codec cần thiết.your browser is not up to date or website pages does not have a suitable video codec. It would help if you communicated with the developer to solve the issue and install all the required codecs.

Làm cách nào để tạo một video tự động và vòng lặp trong HTML?

Hoàn thành khóa học HTML/CSS 2022 Autoplay được sử dụng để bắt đầu video khi tải video và trang.Thuộc tính vòng lặp là một thuộc tính Boolean.Khi có mặt, nó chỉ định rằng video sẽ bắt đầu lại, mỗi khi nó kết thúc.Thuộc tính vòng lặp nên làm điều đó.The loop attribute is a boolean attribute. When present, it specifies that the video will start over again, every time it is finished. The loop attribute should do it.

Bài Viết Liên Quan

Hướng dẫn how to represent path in python - cách biểu diễn đường dẫn trong python
Hướng dẫn switch to python 2 - chuyển sang python 2
Giá ktm duke 390 abs 2023
Hướng dẫn stop for loop after n iteration python - dừng vòng lặp for sau n lần lặp lại python
Hướng dẫn how do i write and run php code? - làm cách nào để viết và chạy mã php?
Hướng dẫn how do i fix spelling in excel? - làm cách nào để sửa lỗi chính tả trong excel?
Hướng dẫn how do you use modify in python? - làm thế nào để bạn sử dụng sửa đổi trong python?
Hướng dẫn how to handle ioerror in python - cách xử lý ioerror trong python
Hướng dẫn style color css - màu phong cách css
Tháng 3 âm năm 2023
Hướng dẫn how do you get elements after split in python? - làm thế nào để bạn có được các phần tử sau khi tách trong python?
Hướng dẫn python 2.7 vscode - python 2.7 vscode
Hướng dẫn mysql 8 update user password - mysql 8 cập nhật mật khẩu người dùng
Hướng dẫn how to run php file in visual studio code terminal - cách chạy tệp php trong thiết bị đầu cuối mã trực quan studio
WHEN CAN 2023 f150 be ordered?
Hướng dẫn how to become pro in python - làm thế nào để trở nên chuyên nghiệp trong python
Hướng dẫn mysql trigger after insert on multiple tables - kích hoạt mysql sau khi chèn trên nhiều bảng
Hướng dẫn how do i see all columns in python? - làm cách nào để xem tất cả các cột trong python?
Hướng dẫn python remove everything after last occurrence of character - python xóa mọi thứ sau lần xuất hiện cuối cùng của ký tự
Hướng dẫn python program to check even or odd using function - chương trình python để kiểm tra chức năng chẵn hay lẻ

Toplist mới

#1
Top 7 tết mậu thân năm 1968 đã diễn ra sự kiện gì ở miền nam nước ta 2023
6 tháng trước
#2
Top 13 luyện từ và câu: dấu gạch ngang lớp 4 trang 45 2023
6 tháng trước
#3
Top 6 trong mặt phẳng oxy ảnh của đường thẳng d 3x y 4=0 2023
6 tháng trước
#4
Top 6 thử thách thần chết thuyết minh phần 2 2023
6 tháng trước
#5
Top 4 vở bài tập tiếng việt lớp 3 tập 2 chính tả trang 15 2023
6 tháng trước
#6
Top 5 áo khoác nam quảng châu cao cấp 2023
6 tháng trước
#7
Top 4 nội dung nào sau đây không phải là trách nhiệm của đơn vị đầu mối cung cấp thông tin 2023
6 tháng trước
#8
Top 9 mẫu đồng phục công sở đẹp 2022 2023
6 tháng trước
#9
Top 5 ốp lưng iphone 13 pro bảo vệ camera 2023
6 tháng trước

Bài mới nhất

Cải làm dưa chua là cải gì năm 2024
Các sản phẩm làm đẹp tiếng anh là gì năm 2024
Bán hàng phát sinh giảm giá hoạch toán tn năm 2024
Lá thư trong tiếng anh là gì năm 2024
Mẫu hợp đồng thanh toán qua bên thứ 3 năm 2024
Giải sách bài tập tiếng anh lớp 7 trang 8 năm 2024
1994 sinh con năm 2023 tháng nào tốt năm 2024
Dịch vụ chuyển văn phòng tại thanh hóa năm 2024
Cách khắc phục lỗi máy tính bị màn hình xanh năm 2024
Các trường của 1 đối tượng là gì năm 2024

Chủ Đề

programming Hỏi Đáp Là gì Mẹo Hay Toplist Địa Điểm Hay Học Tốt mẹo hay Công Nghệ Nghĩa của từ Bao nhiêu Khỏe Đẹp đánh giá Tiếng anh Top List bao nhieu bao nhiêu hướng dẫn Món Ngon So Sánh Bài tập So sánh Xây Đựng Sản phẩm tốt Ngôn ngữ Bài Tập javascript Ở đâu Thế nào Hướng dẫn Dịch Tại sao Máy tính Đại học