微信网页video播放视频不全屏的解决方法
2018-07-16 11:46
459 查看
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/wuchengzeng/article/details/81062684
android,ios微信网页video视频全屏播放的方法:
提示:百度上的答案都是千篇一律无效的
话不多说,直接上代码。
已把controls属性取消。需要的自己加上。
css: <style> video{ width:100%; vertical-align:middle; object-fit:contain; object-position:left top; } </style> html: <p class="play-btn" data-ng-click="playPause(vm.vid)"> <img src="style/images/play_ico.png"/> </p> <video id="video_{{vm.vid}}" src="{{videoUrl(vm.url)}}" x5-playsinline="" playsinline="" webkit-playsinline="" poster="{{vm.pic!=''?vm.pic:''}}" preload="auto" data-ng-click="playPause(vm.vid)"></video> js: function playPause(_vid){ if (document.getElementById('video_'+_vid).paused){ document.getElementById('btn_'+_vid).style.display='none'; document.getElementById('video_'+_vid).play(); }else{ document.getElementById('btn_'+_vid).style.display=''; document.getElementById('video_'+_vid).pause(); } }; function videoUrl(url){ return $sce.trustAsResourceUrl(url); };
playPause():控制视频播放和暂停
videoUrl():ng通过$sce服务把一些地址变成安全的、授权的链接. 不是ng代码可以去掉这个。
相关文章推荐
- HTML,img,video无法铺满屏幕解决方法,同视频做网页背景无法全屏的解决方法
- 完美解决微信video视频隐藏控件和内联播放问题
- VideoView播放视频全屏的方法
- Android HTML5 Video视频标签自动播放与自动全屏问题解决
- HTML5添加 video 视频标签后仍然无法播放的解决方法
- 解决移动端中video点击视频播放会自动全屏
- ios及微信中,音视频无法自动播放的解决方法
- 网页视频、flash打不开或无法播放的解决方法
- Android HTML5 Video视频标签自动播放与自动全屏问题解决
- Windows7系统播放网页视频没有声音的解决方法
- h5-video2 完美解决微信video视频隐藏控件和内联播放问题
- 控制webview使用html5的video播放视频不全屏(inline)的方法
- H5关于IOS安卓app的mp4视频播放全屏解决方法
- HTML5添加 video 视频标签后仍然无法播放的解决方法
- html5网页中用video标签无法播放MP4视频的解决方法
- django下video播放时间不能超过5s并且视频有时无法显示问题的解决方法
- Android VideoView播放本地视频短暂黑屏的解决方法
- Chrome浏览器中使用 iframe 嵌入网页导致视频不能全屏的问题解决方法
- HTML5添加video视频标签后仍然无法播放的解决方法
- Android使用VideoView出现无法播放此视频问题的解决方法