微信網頁video播放視訊不全屏的解決方法
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程式碼可以去掉這個。
相關文章
- 網頁看視訊不能全屏怎麼辦_win10視訊無法全屏播放的解決方法網頁Win10
- 安卓微信視訊播放全屏問題處理安卓
- ReactNative——react-native-video實現視訊全屏播放ReactIDE
- WebView 視訊全屏播放(基於Html5 video)WebViewHTMLIDE
- 網頁看影片不能全屏怎麼辦_win10影片無法全屏播放的解決方法網頁Win10
- 記一次微信H5全屏播放視訊的總結H5
- 微信小程式 – 解決騰訊視訊外掛—視訊只能播放廣告問題微信小程式
- 微信網頁授權視訊教程網頁
- Chrome使用video無法正常播放MP4視訊的解決方案ChromeIDE
- html5–移動端視訊video的android相容,去除播放控制元件、全屏等HTMLIDEAndroid控制元件
- RTMP視訊直播系統(PC網頁/微信小程式/播放器/流媒體)網頁微信小程式播放器
- vue使用video.js解決m3u8視訊播放格式VueIDEJS
- 微信小程式 Video 視訊太小怎麼辦微信小程式IDE
- Flutter:基於video_player實現視訊相關手勢控制、全屏播放FlutterIDE
- video.js 一個頁面同時播放多個視訊IDEJS
- 視訊播放器全屏旋轉方案播放器
- 微信開發之網頁中加入視訊和音訊網頁音訊
- video自定義實現視訊播放功能IDE
- video視訊標籤播放時js/jQuery顯示播放控制元件會導致播放暫停解決辦法IDEJSjQuery控制元件
- iOS開發 webview禁止視訊全屏播放iOSWebView
- windows10系統無法播放GoPro視訊的解決方法WindowsGo
- Cisdem Video Player for mac(高清視訊播放器)IDEMac播放器
- 短視訊app開發,點選視訊進行全屏播放APP
- 微信audio音訊不能播放音訊
- win10微信視訊無法使用攝像頭怎麼辦 win10電腦微信打不開攝像頭解決方法Win10
- Flutter 實現視訊全屏播放邏輯及解析Flutter
- 微信小程式 iOS 中部分機型不顯示 iconfont 的解決方法微信小程式iOS
- 微信小程式音訊播放 InnerAudioContext 的用法微信小程式音訊Context
- Elmedia Video Player Pro 專業音視訊播放器IDE播放器
- 無外掛H5播放器EasyPlayer.js網頁web無外掛播放器選擇全屏時,影片區域並沒有全屏問題的解決方案H5播放器JS網頁Web
- win10 hevc視訊播放器沒有畫面怎麼辦_win10 hevc視訊播放器無法播放解決方法Win10播放器
- 使用微信API實現H5頁面播放音訊檔案APIH5音訊
- win10 edge瀏覽器打不開視訊的解決方法Win10瀏覽器
- win10系統mpg提示播放此視訊需要新的編解碼器的解決方法Win10
- chrome谷歌瀏覽器視訊播放報錯:No compatible source was found for this media解決方法Chrome谷歌瀏覽器
- Vue+Video.js播放m3u8視訊流VueIDEJS
- Elmedia Video Player Pro for Mac(專業音視訊播放器)IDEMac播放器
- Mac專業音視訊播放器:Elmedia Video Player ProMac播放器IDE