Tôi gặp sự cố khi nhận ví dụ hoạt động đọc siêu dữ liệu từ tệp WebVTT, được chỉ định bởi yếu tố <track> của <video> trong trang HTML5. Để rõ ràng, tôi không nói về việc đọc siêu dữ liệu ra khỏi chính tệp video (ví dụ như bạn sẽ làm với một luồng truyền tải MPEG). Những gì tôi đang nói đến là phần tử <track> được sử dụng cho phụ đề video. Một trong những thuộc tính của một <track> là kind, mà có thể được quy định như bất kỳ những giá trị sau:Đọc siêu dữ liệu từ <track> của HTML5 <video> bằng cách sử dụng Phụ đề
- Subtitles
- Mô tả
- Captions
- Navigation
- Chương
- Metadata
Tôi đang thử g để sử dụng loại dữ liệu siêu dữ liệu để truy cập văn bản được lưu trữ trong tệp WebVTT tương ứng, mà tôi định sử dụng JavaScript. Tôi biết điều này là có thể, vì nó là mentioned by Silvia Pfeiffer cũng như by the maker of Captionator, là hình ảnh đa chiều JavaScript mà tôi đang sử dụng để thực hiện chức năng diễn giải các thẻ <track>. Tuy nhiên, tôi không thể làm cho nó hoạt động được.
Mã của tôi dựa trên ví dụ về phụ đề của tài liệu Captionator. Tôi đã thêm một nút để truy xuất siêu dữ liệu và hiển thị nó khi tôi nhấp vào nút. Thật không may, nó vẫn hiển thị "không xác định" thay vì siêu dữ liệu. Bất kỳ ý tưởng những gì tôi có thể làm không chính xác? Ngoài ra, có ai biết một ví dụ làm việc ở đâu mà tôi có thể xem không? Tôi không thể tìm thấy một nơi nào.
Nếu bạn quan tâm để xem xét mã của tôi, tôi đã bao gồm nó dưới đây:
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Video Closed Captioning Example</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" media="screen" href="js/Captionator-v0.5-12/css/captions.css"/>
</head>
<body>
<h1>HTML5 Video Closed Captioning Example</h1>
<div>
<p id="metadataText">Metadata text should appear here</p>
<input type='button' onclick='changeText()' value='Click here to display the metadata text'/>
</div>
<video controls autobuffer id="videoTest" width="1010" height="464">
<source src="http://localhost:8080/Videos/testVideo.webm" type="video/webm" />
<source src="http://localhost:8080/Videos/testVideo.mp4" type="video/mp4" />
<!-- WebVTT Track Metadata Example -->
<track label="Metadata Track" kind="metadata" src="http://localhost:8080/Videos/Timed_Text_Tracks/testVideo_metadata.vtt" type="text/webvtt" srclang="en" />
</video>
<!-- Include Captionator -->
<script type="text/javascript" src="js/Captionator-v0.5-12/js/captionator.js"></script>
<!-- Example Usage -->
<script type="text/javascript" src="js/Captionator-v0.5-12/js/captionator-example-api.js"></script>
<script type="text/javascript">
window.addEventListener("load",function() {
captionator.captionify(null,null,{
debugMode: !!window.location.search.match(/debug/i),
sizeCuesByTextBoundingBox: !!window.location.search.match(/boundingBox/i),
enableHighResolution: !!window.location.search.match(/highres/i),
});
var videoObject = document.getElementsByTagName("video")[0];
videoObject.volume = 0;
document.body.appendChild(generateMediaControls(videoObject));
},false);
function changeText() {
document.getElementById('metadataText').innerHTML = testVar;
var cueText = document.getElementById("video").tracks[0].activeCues[0].getCueAsSource();
document.getElementById('metadataText').innerHTML = cueText;
}
</script>
</body>
</html>
tập tin WebVTT của tôi trông như thế này:
WEBVTT
0
00:00.000 --> 00:04.000
Testing 1 2 3 . . .
Hey - Tôi là nhà phát triển của Captionator và ngay từ cái nhìn đầu tiên, những gì bạn đang làm có vẻ đúng. Tôi đang nhìn vào khả năng rằng bạn có thể đã tìm thấy một lỗi - và tôi sẽ đăng một câu trả lời với những gì tôi tìm thấy. :) – Christopher