html5中使用video标签播放本地视频不显示图像，只有声音，全屏没问题，求解决方案

如题。
不全屏时，无法看到图像。
目前是通过默认全屏来规避的。
代码如下

<!DOCTYPE html>  
<html>  

    <head>  
        <meta charset="utf-8">  
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
        <meta name="HandheldFriendly" content="true" />  
        <meta name="MobileOptimized" content="320" />  
        <title></title>  
        <script src="js/mui.min.js"></script>  
        <link href="css/mui.min.css" rel="stylesheet" />  
        <style>  
            html,  
            body {  
                height: 100%;  
            }  
            .mui-content {  
                position: fixed;  
                top: 50px;  
                bottom: 10px;  
                left: 0;  
                right: 0;  
            }  
            video {  
                display: block;  
                margin: 0 auto;  
                max-width: 100%;  
            }  
        </style>  
    </head>  

    <body>  
        <header class="mui-bar mui-bar-nav">  
            <h1 class="mui-title">播放视频</h1>  
            <button class="mui-btn mui-btn-link mui-pull-right" id='btnV'>选择</button>  
        </header>  
        <div class="mui-content">  
            <div style="width:100%;height:100%;display:table;position: relative;">  
                <div style="display:table-cell;vertical-align:middle;">  
                    <video id="video" autoplay controls></video>  
                </div>  
            </div>  

        </div>  
        <script type="text/javascript">  
            mui.init();  
            mui.plusReady(function() {});  
            var galleyVideos = function() {  
                plus.gallery.pick(function(pth) {  
                    var v = document.getElementById('video');  
                    v.src = pth;  
                    //自动全屏  
                    //autoFullScrenn(v);  
                }, function(e) {  
                    console.log(JSON.stringify(e));  
                }, {  
                    filter: 'video'  
                });  
            };  
            document.getElementById("btnV").addEventListener('tap', galleyVideos);  
            var fullscreen = function(elem) {  
                var prefix = 'webkit';  
                if (elem[prefix + 'EnterFullScreen']) {  
                    return prefix + 'EnterFullScreen';  
                } else if (elem[prefix + 'RequestFullScreen']) {  
                    return prefix + 'RequestFullScreen';  
                };  
                return false;  
            };  

            function autoFullScrenn(v) {  
//              var ua = navigator.userAgent.toLowerCase();  
//              var Android = String(ua.match(/android/i)) == "android";  
//               if(!Android) return;//非android系统不使用;  
                var video = v,  
                    doc = document;  
                var fullscreenvideo = fullscreen(doc.createElement("video"));  
                if (!fullscreen) {  
                    alert("不支持全屏模式");  
                    return;  
                }  
                video.addEventListener("webkitfullscreenchange", function(e) {  
                    if (!doc.webkitIsFullScreen) { //退出全屏暂停视频  
                        this.pause();  
                    };  
                }, false);  
                video.addEventListener("click", function() {  
                    this.play();  
                    video[fullscreenvideo]();  
                }, false);  
                video.addEventListener('ended', function() {  
                    doc.webkitCancelFullScreen(); //播放完毕自动退出全屏  
                }, false);  
            };  
        </script>  
    </body>  

</html>

html5中使用video标签播放本地视频不显示图像，只有声音，全屏没问题，求解决方案

8 个回复

公告

相关问题

html5中使用video标签播放本地视频不显示图像，只有声音，全屏没问题，求解决方案

与内容相关的链接

8 个回复

公告

相关问题