video标签使用中踩的坑

最近公司需要在项目中添加视频,并且是用angularjs写的项目,中间遇到了一些坑,在此记录下来。
1.有些html viedo播放视频有声音但是没图像

1.1、MP4有3中编码格式,mpg4(xdiv),mpg4(xvid),avc(h264);
1.2 、使用格式工厂(或其他视频软件)将视频转换成avc(h264)编码格式;
1.3、本地测试时可以先把视频拖到浏览器中,如果浏览器可以正常播放,则文件上传到服务器后,请求服务器端视频文件也可以正常播放。
1.4、为确保视频可以正常播放,服务器路径不要出现中文字符。

2.angelar使用ng-src时无法播放,此时使用angular自属性带的 $sce 属性
使用angular自定义过滤器

app.filter('trustUrl',['$sce',function($sce){
    return function(recordingUrl){
        return  $sce.trustAsResourceUrl(recordingUrl);
    }
}])

3.viedo标签自带 controls 属性会有下载按钮,如果需要隐藏,使用 controlsList="nodownload"


4.angular中使用video时,使用poster属性设置动态封面时,控制台会有打印报错信息,但是实际效果会出现,无大碍

你可能感兴趣的:(video标签使用中踩的坑)