更新:我使用的是 Fotorama 插件,似乎是底部菜单导致了问题。通过在视频标签周围放置 div 标签来禁用该菜单,使设置分辨率的功能起作用。谢谢帮助和鼓励。对于底部菜单,我创建了一个简单的菜单,使用链接按钮链接到与下一个视频相似的页面。
我编写了 JavaScript 代码,可以根据选项/选择元素的输入更改视频的分辨率。有用。问题是当我将完全相同的代码放入函数中时它停止工作(这样代码可以多次执行 - 每次更改选项/选择元素时。)
Here is an image of the videoplayer and the option/select-element I have added
这是选项/选择元素的代码:
<li class="porfolionav">
<select id="selectQuality" onchange="changeVidQualityFunction()">
<option value="1080" selected="selected" disabled="disabled">Videokvalitet</option>
<option value="1080" id="1080">HD 1080</option>
<option value="480" id="480">SD 480</option>
<option value="320" id="320">SD 320</option>
</select>
</li>
这是视频的代码:
<div class="fotorama" data-width="1209px" data-height="680px" data-allowfullscreen="false" data-arrows="true" data-click="true" data-swipe="true" data-autoplay="false" data-transition="slide" data-clicktransition="slide" data-shuffle="false">
<video id="video1V" height="680px" controls data-caption="320 OGG" poster="videos/img/thumb1.jpg">
<source src="videos/test_q_320" id="video1">Your browser does not support HTML5 video.
</video>
<video id="video2V" height="680px" controls data-caption="480 OGG" poster="videos/img/thumb2.jpg">
<source id="video2" src="videos/test_q_480.ogg" id="video2">Your browser does not support HTML5 video.
</video>
<video id="video3V" height="680px" controls data-caption="1080 OGG" poster="videos/img/thumb3.jpg">
<source id="video3" src="videos/test_q_1080.ogg" id="video3">Your browser does not support HTML5 video.
</video>
</div>
这里是更改分辨率的代码(不在函数中时有效):
<script>
function changeVidQualityFunction(){
$chosenVidQuality = document.getElementById("selectQuality").value;
$trulycompletevideolink = document.getElementById("video1").src;
$step1 = document.getElementById("video1").src.split("_q_");
//COMMENT: step1[0] is the url from start and including the first part of the filename (not the "_q_"-part and the format)
$upToVidName = $step1[0];
//COMMENT: step1[1] is the resolution and format, e.g. 320.ogg
$step2 = $step1[1].split(".");
//COMMENT: step2[0] is the resoltion e.g. 720 ,step2[1] is the format (without the dot in front of the format type) e.g. ogg
$vidresolution = $step2[0];
$vidformat = $step2[1];
$vidresolution = $chosenVidQuality;
$result = $upToVidName+"_q_"+$vidresolution+"."+$vidformat;
$('#video1').attr('src', $result);
$('#video1V').attr('data-caption', $vidresolution+" OGG");
$('#video1V').load();
window.alert("video1 attr src:"+document.getElementById("video1").src); //shows updated URL
}
</script>
谢谢
最佳答案
在您的 head
上标记放置此 <script src="jquery-1.12.2.js" charset="utf-8"></script>
包含 jquery 库,因为您使用的是 jquery 中的函数。
从这一行
<select id="selectQuality" onchange="changeVidQualityFunction()">
改成
<select id="selectQuality" name="video_selected">
并按照 jquery 的规则编辑您的脚本,按如下方式进行适当的声明。
function changeVidQualityFunction() {
var ev = $('#selectQuality').val();
console.log(ev);
var chosenVidQuality = $('#selectQuality').val();
var trulycompletevideolink = document.getElementById("video1").src;
var step1 = document.getElementById("video1").src.split("_q_");
//COMMENT: step1[0] is the url from start and including the first part of the filename (not the "_q_"-part and the format)
var upToVidName = step1[0];
//COMMENT: step1[1] is the resolution and format, e.g. 320.ogg
var step2 = step1[1].split(".");
//COMMENT: step2[0] is the resoltion e.g. 720 ,step2[1] is the format (without the dot in front of the format type) e.g. ogg
var vidresolution = step2[0];
var vidformat = step2[1];
vidresolution = chosenVidQuality;
var result = upToVidName + "_q_" + vidresolution + "." + vidformat;
$('#video1').attr('src', result);
$('#video1V').attr('data-caption', vidresolution+" OGG");
$('#video1V').load();
window.alert("video1 attr src:"+document.getElementById("video1").src); //shows updated URL
}
注意我删除了 $
尽管这是有效的,但还是用 var
声明它。所以 javascript 会知道它们是变量。
$(document).ready(function(){
$('#selectQuality').change(function(){
changeVidQualityFunction();
});
});
代码的作用是,它会跟踪下拉菜单的变化,如果有变化,函数就会执行。
希望对你有帮助
关于javascript - 使用 JavaScript 更改 HTML 5.0 视频的视频分辨率,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38933622/