我正在创建的应用程序中有视频、声音和图像。为了显示视频，我起诉“所有人视频”格式。但问题是，视频加载需要时间。我添加了各种事件处理程序， loadeddata 、 readystatechange 、 canplay 、 canplaythrough 、 loadedmetadata 我可能尝试过的一切。但所有事件都发生在我实际看到视频海报之前(直到背景为黑色)以及实际加载时。我如何知道视频何时真正准备好播放？(我的意思是实际上)
下面的函数是这样调用的
$video = getVideoObj({
//'controls' : 'controls',
'width': '100%',
'height': '100%',
'mediaUrl': appSettings.is_dev ? devMediaUrl + 'video/' + videoname
: appSettings.site_url + 'resolve_path/' + mediaFilesUuid + '/media/video/' + videoname
}),
getVideoObj = function (videoProperties) {
var controlsText = (videoProperties.controls && videoProperties.controls == "controls") ? "controls='" + videoProperties.controls + "'" : "",
$video = $('<video/>', {
'width': videoProperties.width,
'height': videoProperties.height
}),
mp4Src = (videoProperties.mediaUrl).replace('mov', 'mp4'),
$sourceMp4 = $('<source/>', {'src': mp4Src, 'type': 'video/mp4' }),
webmSrc = (videoProperties.mediaUrl).replace('mov', 'webm'),
$sourcewebm = $('<source/>', { 'src': webmSrc, 'type': 'video/webm'}),
oggSrc = (videoProperties.mediaUrl).replace('mov', 'theora.ogv'),
$sourceOgg = $('<source/>', {'src': oggSrc,'type': 'video/ogg' }),
$object = $('<object/>', {
'type': 'application/x-shockwave-flash',
'data': 'http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf',
'width': videoProperties.width,
'height': videoProperties.height
}),
$param1 = $('<param/>', {
'name': 'movie',
'value': 'http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf'
}),
$param2 = $('<param/>', {
'name': 'allowFullScreen',
'value': 'true'
}),
$param3 = $('<param/>', {
'name': 'wmode',
'value': 'transparent'
}),
playlistObject = {
'playlist': [
'', {
'url': '',
'autoPlay': false
}
]
},
$param4 = $('<param/>', {
'name': 'flashVars',
'config': playlistObject
}),
$img = $('<img/>', {
'alt': 'Big Buck Bunny ',
'src': 'http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg',
'width': videoProperties.width,
'height': videoProperties.height,
'title': 'No video playback capabilities, please download the video below'
});
if (controlsText !== "") {
$video.attr("controls", controlsText);
}
var video = $video.get(0);
video.addEventListener('loadeddata', function() {
function checkLoad() {
console.log("video.readyState ",video.readyState);
if (video.readyState === 4) {
console.log("ready");
} else {
setTimeout(checkLoad, 100);
}
}
checkLoad();
}, false);
video.addEventListener("canplay", function () {
console.log("Video can be played");
}, false);
video.addEventListener("loadedmetadata", function () {
vLength = video.duration.toFixed(1);
console.log(vLength);
}, false);
video.addEventListener("readystatechange", function () {
console.log(video.readyState);
if (videoreadyState ===4) {
console.log("Ready state");
}
}, false);
video.addEventListener('canplaythrough', function () {
console.log("Can play through");
}, false);
video.addEventListener('load', function () {
console.log("Loaded");
}, false); //add load event as well to avoid errors, sometimes 'canplaythrough' won't dispatch.
video.addEventListener('progress',function (e) {
console.log('PROGRESS',e);
},false);
$object.append($param1, $param2, $param3, $param4, $img);
$video.append($sourceOgg, $sourceMp4, $sourcewebm, $object);
return $video;
}
最佳答案
只需使用html5中的简单视频播放即可
<video id="video1" width="420" controls>
<source src="http://corrupt-system.de/assets/media/sintel/sintel-trailer.m4v" type="video/mp4">
<source src="pjds.ogg" type="video/ogg">
</video>
关于javascript - 用于了解 HTML5 视频何时准备好在没有黑色背景的情况下播放的事件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26646451/