HTML5视频的高清控制
HD control for HTML5 video
我已经设置了一个Html5视频,它有基本的控件。然而,我上传的视频相当重,我想提供一个较低分辨率的选项,比如高清开关控制。我在互联网上查看了如何将高清按钮应用于html5,但主要解决方案似乎是安装视频播放器。有没有一种更简单的方法可以在不需要安装视频播放器的情况下实现高清按钮?我已经用几个jQuery命令设置了我的html5视频,我不想再从头开始。我还发现可以自定义html5视频控件。是否可以仅通过html/javascript设置自定义的高清按钮?如果是,怎么做?
这是我现在的代码
<video src="../Frustrated/Frustrated.mp4" controls preload="metadata"> <source src="../Frustrated/Frustrated.mp4" type="video/mp4">
您可能会让它看起来更优雅,但下面的代码示例将允许您拥有在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>
将不同质量的视频上传到服务器,并根据用户选择的质量播放不同的视频。
即使可以在客户端降级视频,这也是毫无意义的,因为客户端仍然必须下载高清视频才能进行转换。
相关文章:
- 从桌面读取python文件时高亮显示代码
- 高亮显示时编辑文本大小和颜色
- 更改高贴图的缩放级别
- JS编译器/包管理器,用于版本控制
- Angularjs-utils高亮过滤器在搜索时破坏应用程序
- 是否可以控制获取哪些Google地图脚本(JavaScript API)
- 三星智能电视应用程序;Brightcove示例应用程序远程控制问题
- 使用JavaScript动态插入DIV的成本有多高
- 动态更改高图中的系列颜色
- 高库存时期时间与时区不匹配
- 强制Youtube嵌入高清播放(2016年版)
- 如何在 JW 播放器中显示高清质量
- 带有背景高清视频和动态播放的HTML页面
- 如何使用箭头键控制高亮显示的单元格
- 为什么智能手机上的屏幕分辨率与javascript屏幕宽度不同,尽管高清分辨率很高
- 如何根据外部单击事件控制高图
- 如何拥有自托管jwplayer的高清按钮
- JW播放器加载高清插件本地
- HTML5视频的高清控制
- 使用Jscript在Jw Player中引用高清视频文件