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

悠讓
  • 219
<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,别且从上次观看的时间继续播放。

回复
阅读 6.7k
3 个回答
✓ 已被采纳
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无效。

linong
  • 26k

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

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


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

clipboard.png

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

宣传栏