H5 video tag I want to make a button to switch sharpness, how to solve it
<video id="myVideo" style="width:100%" controls="" preload="">
<source src="video/echo-hereweare.mp4" type="video/mp4" codecs="avc1.42E01E,mp4a.40.2">
<!--[if IE 8]>
<embed src="video/echo-hereweare.mp4" style="width:100%" autostart="false"/>
<![endif]-->
</video>
//
function videoSourceChoose(){
var myVideo = document.getElementById("myVideo");
var url = myVideo.currentSrc;
var nums = url.length;
url = url.substring(0,nums-4)+"_small.mp4"; //
var nowsTime = myVideo.currentTime; //
myVideo.load();
}
call this method when the button is clicked, switch to _ small.mp4, and continue playing from the last time you watched it.
is similar to videojs , except for playback using video, and the control bar is actually simulated. To switch the definition is to change the video address, and then the playback time is saved before changing the address, and then go back after the assignment.
of course, the above method is not very good, because the resources have already been loaded, and then have to be reloaded together. Other methods can use ajax to obtain segmented video information, and then combine it locally and push it into video, which can be more silky.
< hr >
by the way to help you find a article , you can use the search function to find previous questions or articles. The effect will be better
Let's not say whether the practice is reasonable or not, let's talk about the general solution first.
Click to switch-get the current playback progress a-replace src- playback-to jump to a
the mainstream way to jump to a
is to use file stream blob instead of MP4
function videoSourceChoose(_this){
var myVideo = document.getElementById("myVideo");
var url = myVideo.currentSrc;
if($(_this).text() == ""){
$(_this).text("");
url = url.substring(0,url.length-4)+"_small.mp4"; //
}else{
$(_this).text("");
url = url.substring(0,url.length-10)+".mp4"; //
}
var nowsTime = myVideo.currentTime; //
$("-sharpmyVideo").find("source").attr("src",url).attr("autoplay","true");
myVideo.load();
myVideo.play();
myVideo.currentTime = nowsTime;
}
The
code is as above, and the test needs to be on a real server before the local HBuilder of OK, is invalid.
