我已经设置了Html5视频并且它具有基本控件。但是,我上传的视频非常繁重,我想提供一个较低分辨率的选项,如高清开关控制。我在互联网上看了如何将高清按钮应用到html5,但主要解决方案似乎安装了一个视频播放器。是否有更简单的方法来实现HD按钮而无需安装视频播放器?我已经使用几个jQuery命令设置了我的html5视频,我不想再次从头开始。我也看到也可以自定义html5视频控件。是否可以通过html / javascript设置自定义高清按钮?如果有,那是怎么做到的?
这是我目前的代码
<video src="../Frustrated/Frustrated.mp4" controls preload="metadata"> <source src="../Frustrated/Frustrated.mp4" type="video/mp4">
答案 0 :(得分:0)
你可能会让这个看起来更优雅,但下面的代码示例将允许你有更改HD和常规版本之间的源的按钮(基于按钮的ID,但你可以更改逻辑,如果需要)。代码还会检查浏览器是否支持mp4,ogg或webm,并默认使用第一种支持的格式(如果您使用代码的那部分,则可能需要对每种类型进行编码
<video width="400" controls id="video">
<source src="../Frustrated/furstrated.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
<br>
<button id="frustratedHD" onclick="playvid(this)">HD</button><button id="frustrated" onclick="playvid(this)">Regular</button>
<script>
// gets the video element
var video = document.getElementById("video");
// sets the extension / container we'll use
var vidType = "";
// identifies what type of video we can play, assuming this is an HTML5 supporting browser
if (video.canPlayType) {
if (video.canPlayType('video/mp4; codecs="avc1.42E01E"') == "probably") {
vidType = "mp4"
} else {
if (video.canPlayType('video/ogg; codecs="theora"') == "probably") {
vidType = "ogg"
} else { if (video.canPlayType('video/webm; codecs="vp8, vorbis"') == "probably") {
vidType = "webm"
}
}
}
}
// you'll want to decide how to handle no supported video type...
function playvid(vid) {
// log selected item to confirm selection, can comment this line out
console.log("../Frustrated/" + vid.id + "." + vidType)
// set the video element source to selected content and correct type
video.src = "../Frustrated/" + vid.id + "." + vidType
video.play();
}
</script>
答案 1 :(得分:-1)
将不同质量的视频上传到您的服务器,并根据用户选择的质量播放不同的视频。
即使可以在客户端降级视频,但这也是毫无意义的,因为客户端仍然需要下载高清视频才能进行转换。