Javascript HTML5视频标签优化
我有Angular应用程序,它是与node/Express服务器一起构建和服务的 我使用用户可以观看的视频Javascript HTML5视频标签优化,javascript,css,html,angular,html5-video,Javascript,Css,Html,Angular,Html5 Video,我有Angular应用程序,它是与node/Express服务器一起构建和服务的 我使用用户可以观看的视频 <video width="100%" height="344" controls controlsList="nodownload" preload="metadata" autoplay> <source src="/assets/video/digital.mp4" type="video/mp4"> </video>
<video width="100%" height="344" controls controlsList="nodownload" preload="metadata" autoplay>
<source src="/assets/video/digital.mp4" type="video/mp4">
</video>
它很好用。但在慢速互联网上,它的播放速度非常慢。我想知道在这里可以做些什么,这样用户即使在网速很慢的情况下也不会感到沮丧。而不是preload=“metadata”尝试preload:“auto” 自动:表示可以下载整个视频文件,即使 不希望用户使用它 但正如所建议的,预加载属性并不总是可靠的 这里提到了4种解决方案&最可靠的是 解决方案4、ajax和bloburl(工程)
降低视频质量?哇…视频是数字的吗。mp4已修复…它是页面上唯一的视频吗?@Rajaji是的,它是单一视频o@FedericoklezCulloca是的,但是其他的。视频大约是90mb,所以我不认为,在这里加载一次是个好主意,它需要很多时间。它的优点是异步的。。。您可以在body load时启动ajax调用,也可以在应用程序启动时启动。此外,还可以启用缓存,这样视频将只下载一次,并且只在服务器上下载一次。从blob播放视频非常慢,我没有解释原因
var req = new XMLHttpRequest();
req.open('GET', 'video.mp4', true);
req.responseType = 'blob';
req.onload = function() {
// Onload is triggered even on 404
// so we need to check the status code
if (this.status === 200) {
var videoBlob = this.response;
var vid = URL.createObjectURL(videoBlob); // IE10+
// Video is now downloaded
// and we can set it as source on the video element
video.src = vid;
}
}
req.onerror = function() {
// Error
}
req.send();