鍍金池/ 問答/HTML/ H5 video標(biāo)簽我要做一個(gè)切換清晰度的按鈕，請問如何解決

H5 video標(biāo)簽我要做一個(gè)切換清晰度的按鈕，請問如何解決

<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;    //視頻播放時(shí)間
    myVideo.load();
}

當(dāng)點(diǎn)擊按鈕的時(shí)候調(diào)用此方法，切換為_small.mp4，別且從上次觀看的時(shí)間繼續(xù)播放。

回答
編輯回答
命多硬

先不說做法合不合理，先說大致解法吧。
點(diǎn)擊切換-獲取當(dāng)前播放進(jìn)度a-替換src-播放-跳轉(zhuǎn)進(jìn)度至a
主流的做法是使用文件流blob代替MP4

2017年8月7日 02:06
編輯回答
哚蕾咪

類似于videojs那樣，只是使用video播放，控制條其實(shí)是模擬實(shí)現(xiàn)的。切換清晰度，就是換視頻地址，然后播放時(shí)間就是換地址之前保存上，換完了賦值回去。

當(dāng)然上面的方法其實(shí)不太好，因?yàn)橘Y源其實(shí)是已經(jīng)都加載完了，之后又要重新加載一起。其他方法可以采用ajax獲取分段視頻信息，然后本地自己組合，推到video里面，這可以絲滑一些。

順便去幫你找個(gè)文章，這種問題可以使用搜索功能，找一下之前的問題或者文章什么的。效果會(huì)更好

clipboard.png

2017年6月14日 00:30
編輯回答
妖妖
function videoSourceChoose(_this){
    var myVideo = document.getElementById("myVideo");
    var url = myVideo.currentSrc;
    
    if($(_this).text() == "標(biāo)清"){
        $(_this).text("高清");
        url = url.substring(0,url.length-4)+"_small.mp4";    //視頻地址
    }else{
        $(_this).text("標(biāo)清");
        url = url.substring(0,url.length-10)+".mp4";    //視頻地址
    }
    var nowsTime = myVideo.currentTime;    //視頻播放時(shí)間

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

代碼如上，測試需要在真實(shí)服務(wù)器上才OK，本地的HBuilder無效。

2017年2月19日 05:59