quang cao hosting

Hướng dẫn xây dựng video với HTML5 Captions và Dynamic Thumbnail

Xem: 916    Tải: 0   Thảo luận: 0   Mục: HTML-CSS template   Lĩnh vực: Khác

8 điểm   ( 4 đánh giá ) File đã được kiểm thử

Web và ứng dụng phát triển những người muốn làm nhiều hơn với video trực tuyến có thể thấy rằng ba ít được biết đến, hoặc ít nhất là ít thường xuyên thảo luận, tính năng video HTML5 có thể mở nhiều kỹ thuật mới và sáng tạo để tích hợp video trong những cách thức mới.

Giới thiệu
Web và ứng dụng phát triển những người muốn làm nhiều hơn với video trực tuyến có thể thấy rằng ba ít được biết đến, hoặc ít nhất là ít thường xuyên thảo luận, tính năng video HTML5 có thể mở nhiều kỹ thuật mới và sáng tạo để tích hợp video trong những cách thức mới.
Trong bài viết này tôi sẽ mô tả: mảnh phương tiện truyền thông, các phần tử theo dõi, và HTML5 khả năng video để tích hợp dễ dàng với các yếu tố khác.
Những mảnh vỡ Truyền thông
mảnh phương tiện truyền thông hoặc các phương tiện đoạn URI là một khuyến nghị của W3C tạo ra để cho phép một số khía cạnh của việc xử lý video nguyên bản trong các trình duyệt web.
Hiện tại, tính năng này có thể được sử dụng để bắt đầu hoặc phát lại video ở cuối một khoảnh khắc đặc biệt trong thời gian. Người ta có thể tưởng tượng được tính năng này cho phép một loại ma video mà cho phép một nhà phát triển trò chơi HTML, như một ví dụ, để tải một tập tin video duy nhất, nhưng dễ dàng chơi các phần khác nhau để đáp ứng với một số hành động chơi.
Ở dạng đơn giản nhất, các phương tiện truyền thông thời gian đoạn bắt đầu được thêm vào URL nguồn video. Chú ý trong ví dụ sau, "# t = 20" sau khi các URL nguồn, nơi các "t" đại diện cho một mảnh phương tiện truyền thông thời gian.

<video controls>
    <source src="102614-video-sample.mp4#t=20">
</video>

Trong đoạn mã trên video sẽ bắt đầu phát lại lúc 00:20 (giả sử mm: ss). Hãy xem một ví dụ khác:

<video controls>
    <source src="102614-video-sample.mp4#t=6,20">
</video>

Ví dụ trên sẽ bắt đầu chơi tại 00:06 và tiếp tục chơi cho đến khi 00:20.

Các giá trị thời gian trong src URI cũng có thể được quy định trong định dạng giờ phút giây (hh: mm: ss):

<video controls>
    <source src="102614-video-sample.mp4#t=00:00:20">
</video>

Để chứng minh mảnh phương tiện truyền thông, tôi có một video snorkeling 27-thứ hai có ba chuyển khá rõ ràng. Phần đầu tiên bắt đầu vào đầu của video (00:00:00), phần tiếp theo bắt đầu vào khoảng 00:00:06, và sự chuyển đổi thứ ba xảy ra vào khoảng 00:00:17.

Trong bản demo, có một nút đại diện cho mỗi phân đoạn video. Tôi cũng bao gồm hai tập tin mã nguồn riêng biệt để đảm bảo video sẽ chơi trong hầu hết các trình duyệt.

Dưới đây bạn sẽ tìm thấy mã video cùng với các hướng:

<video id="frag1" controls preload="metadata" width="720px" height="540px">
    <source src="102614-video-sample.mp4"
            type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"'
            data-original="102614-video-sample.mp4">
    <source src="102614-video-sample.webm"
            type='video/webm;codecs="vp8, vorbis"'
            data-original="102614-video-sample-webmhd.webm">
</video>

<div class="nav">
    <button data-start="0">Section One</button>
    <button data-start="6">Section Two</button>
    <button data-start="17">Section Three</button>
</div>

Thuộc tính dữ liệu đã được thêm vào các thành phần nguồn và nút để làm cho nó dễ dàng hơn để chèn các đoạn truyền thông theo thời gian với JavaScript. Có hiệu quả, script tải một nguồn mới với một đoạn truyền thông theo thời gian khi nút được click.

function mediaFragOne() {
    var video, sources, nav, buttons;
    video = document.querySelector('video#frag1');
    sources = video.getElementsByTagName('source');
    nav = document.querySelector('video#frag1+nav');
    buttons = nav.getElementsByTagName('button');

    for (var i = buttons.length - 1; i >= 0; i--) {
        buttons[i].addEventListener('click', function() {
            for (var i = sources.length - 1; i >= 0; i--) {
                sources[i].setAttribute(
                    'src', (sources[i].getAttribute('data-original')
                    .concat('#t=' + this.getAttribute('data-start'))));
                    video.load();
                    video.play();
            };
        });
    };
}
mediaFragOne();

Đây là demo:

(Xin lưu ý rằng bởi vì các tập tin video được lưu trữ bên ngoài, sẽ có một số chậm trễ như một tải tập tin cá nhân, do đó cung cấp các bản demo một số thời gian để hiển thị video).

Thêm phụ đề hoặc phụ đề :
HTML5 video bao gồm một built-in phương tiện trình bày trên màn hình văn bản timed hoàn hảo để phù hợp với nội dung video. Điều này có thể được sử dụng để thêm phụ đề video cho khả năng tiếp cận tốt hơn, cung cấp một bảng điểm dịch (phụ đề), cung cấp một mô tả về những gì đang xảy ra, hoặc thậm chí hiện chương hoặc phần tiêu đề.

Tính năng này sử dụng một phần tử theo dõi để mô tả những loại văn bản đang được thêm vào, và cung cấp một nguồn cho các văn bản.

Trong ví dụ này, một đoạn video, trong đó bao gồm văn nói tiếng Anh, có phụ đề tiếng Tây Ban Nha sẽ được hiển thị theo mặc định.

<video id="Subtitle" controls preload="metadata">
   <source src="102614-maui-with-words.mp4" type="video/mp4">
   <source src="102614-maui-with-words.webm" type="video/webm">
   <track src="102614-maui-es.vtt"
          label="Español Subtítulos"
          kind="subtitles" srclang="es" default>
   </track>
</video>

Chú ý rằng phần tử theo dõi được đặt bên trong của phần tử video, và nó có một số thuộc tính, bao gồm src, nhãn, loại, srclang, và mặc định.

src cung cấp các URL cho file văn bản theo thời gian. Đó là, vì những lý do rõ ràng, yêu cầu.
nhãn là tiêu đề của ca khúc. Nó có thể được trình bày cho người dùng.
loại phải có một giá trị của một trong hai "phụ đề", "chú thích", "giới thiệu", "chương", hay "siêu dữ liệu".
srclang chỉ ra ngôn ngữ văn bản theo dõi, và được yêu cầu khi loại được thiết lập để "phụ đề".
mặc định là một thuộc tính Boolean cho trình duyệt biết theo dõi văn bản này nên tải ban đầu.
Các tập tin theo dõi văn bản được liên kết trong src là trong Web Video Tiêu Tracks Format (WebVTT). Về cơ bản, một file WebVTT cần phải khai báo nó là gì và cung cấp một loạt các tín hiệu với các dòng trống ở giữa. Dưới đây là một ví dụ:

WEBVTT FILE

1
00:00:03.000 --> 00:00:04.500
Este material de buceo

2
00:00:04.600 --> 00:00:07.900
fue filmada en el cráter Molokini

3
00:00:08.000 --> 00:00:09.500
Maui, Hawaii

Mỗi cơ trong tập tin WebVTT có thể có một số hoặc một cái tên. Khoảng thời gian trong đó văn bản sẽ được hiển thị trên màn hình được mô tả trong giờ, phút, giây, và định dạng phần nghìn giây.

Cuối cùng, tôi cũng nên lưu ý rằng trong một số trình duyệt, bao gồm phụ đề sẽ thêm một nút đóng chú thích cho các điều khiển video.

Bạn có thể xem demo tại vị trí này cho một phiên bản làm việc trong Chrome, hoặc xem các ví dụ dưới đây CodePen cho rằng một hoạt động trong Firefox.

Đối với một cái nhìn toàn diện hơn nữa về các tính năng, kiểm tra bài viết Ankul Jain của bao tử theo dõi HTML5 của.

Thumbnail động với Canvas
Một lợi thế đáng kể cho việc sử dụng video HTML5 là nó có thể tương tác với các phần tử HTML khác theo những cách mà các plugin của bên thứ ba không thể.

Như một ví dụ, trong năm 2010, Pete Lepage, người làm việc trong các mối quan hệ phát triển cho Google, mô tả làm thế nào để sử dụng HTML5 video và vải với nhau.

Trong ví dụ Lepage, một video được thêm vào tài liệu HTML, một yếu tố vải được tạo ra, và sau đó hình ảnh màn hình được chụp mỗi năm giây và hiển thị trên màn hình. Đây là một phần liên quan của HTML:

<video id="thumb" controls preload="metadata" width="750px" height="540px">
    <source src="102614-video-sample.mp4" 
            type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"'>
    <source src="102614-video-sample-webmhd.webm"
            type='video/webm;codecs="vp8, vorbis"'>
</video>
<canvas id="canvas" 
        width="750px" height="540px"
        style="display:block;">
</canvas>
<div id="screenShots"></div>

JavaScript từ trình diễn Lepage bao gồm nhiều người nghe sự kiện, các biến, và các chức năng:

var video = document.getElementById("thumb");
video.addEventListener("loadedmetadata", initScreenshot);
video.addEventListener("playing", startScreenshot);
video.addEventListener("pause", stopScreenshot);
video.addEventListener("ended", stopScreenshot);

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var ssContainer = document.getElementById("screenShots");
var videoHeight, videoWidth;
var drawTimer = null;

function initScreenshot() {
  videoHeight = video.videoHeight; 
  videoWidth = video.videoWidth;
  canvas.width = videoWidth;
  canvas.height = videoHeight;
}

function startScreenshot() {
  if (drawTimer == null) {
    drawTimer = setInterval(grabScreenshot, 1000);
  }
}

function stopScreenshot() {
  if (drawTimer) {
    clearInterval(drawTimer);
    drawTimer = null;
  }
}

function grabScreenshot() {
  ctx.drawImage(video, 0, 0, videoWidth, videoHeight);
  var img = new Image();
  img.src = canvas.toDataURL("image/png");
  img.width = 120;
  ssContainer.appendChild(img);
}

Trong bản demo, các yếu tố vải được thiết lập để hiển thị: không, có nghĩa là chúng ta chỉ nhìn thấy hình thu nhỏ thay đổi kích cỡ, không phải là hình ảnh canvas gốc. Các cuộc biểu tình có thể mất một chút thời gian để tải, nhưng nó cho thấy cách tương đối đơn giản, nó có thể để có được video HTML5 để làm việc với các phần tử HTML khác.

Hướng dẫn xây dựng video với HTML5 Captions và Dynamic Thumbnail

Hướng dẫn xây dựng  video với HTML5  Captions và Dynamic Thumbnail Đăng ngày 16-03-2016  Web và ứng dụng phát triển những người muốn làm nhiều hơn với video trực tuyến có thể thấy rằng ba ít được biết đến, hoặc ít nhất là ít thường xuyên thảo luận, tính năng video HTML5 có thể mở nhiều kỹ thuật mới và sáng tạo để tích hợp video trong những cách thức mới. 2/10 916

Thảo luận:

Để bình luận bạn phải đăng nhập thành viên.

File tương tự

Files cùng mục

 
File gợi ý cho bạn
File tải nhiều nhất
Megacode.vn - Thư viện mã nguồn chia sẻ, tải file cho cộng đồng
Copyright © 2013-2021. All rights reserved. Bản quyền thuộc VinaGon
Email: info@vinagon.com
Hotline: 086.924.3838