H5 video标签我要做一个切换清晰度的按钮，请问如何解决

Question

<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();
}

当点击按钮的时候调用此方法，切换为_small.mp4，别且从上次观看的时间继续播放。

Answer 1

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;    //视频播放时间

    $("#myVideo").find("source").attr("src",url).attr("autoplay","true");
    myVideo.load();
    myVideo.play();
    myVideo.currentTime = nowsTime;
}

代码如上，测试需要在真实服务器上才OK，本地的HBuilder无效。

Answer 2

类似于videojs那样，只是使用video播放，控制条其实是模拟实现的。切换清晰度，就是换视频地址，然后播放时间就是换地址之前保存上，换完了赋值回去。

当然上面的方法其实不太好，因为资源其实是已经都加载完了，之后又要重新加载一起。其他方法可以采用ajax获取分段视频信息，然后本地自己组合，推到video里面，这可以丝滑一些。

---

顺便去帮你找个文章，这种问题可以使用搜索功能，找一下之前的问题或者文章什么的。效果会更好

Answer 3

先不说做法合不合理，先说大致解法吧。
点击切换-获取当前播放进度a-替换src-播放-跳转进度至a
主流的做法是使用文件流blob代替MP4