小云菜
小云菜
  • 发布:2015-07-06 13:08
  • 更新:2017-07-14 10:11
  • 阅读:9480

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

分类:MUI

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

<!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>  
2015-07-06 13:08 分享
已邀请:

最佳回复

APICLOUD

APICLOUD

有没有试过在线视频全屏

chender

chender - 与人为善

我这边是联网时播放本地文件没问题,没联网时一播放进度条就直接到结束的地方去了

  • SkyGrass

    情况一致,直接开始播放,然后就结束了。

    2015-07-28 16:38

gadget2k

gadget2k

支持一下。我也是这个问题。

小布点

小布点

您好,请问您的问题现在解决了吗?知道是什么引起的吗?我现在也遇到了类似的问题,小屏只有声音没有图像,但在全屏正常播放。

  • 小云菜 (作者)

    开启硬件加速 hardwareAccelerated: true

    2016-03-23 21:11

  • 小布点

    回复 小云菜:我已经试过开启硬件加速了,还是不行

    2016-03-24 14:06

  • 小云菜 (作者)

    回复 小布点:还不行的话调用原生接口吧

    2016-03-28 08:27

B5教程网

B5教程网 - http://www.bcty365.com

来这里学习一下

素材火

素材火 - http://www.sucaihuo.com/

我的情况 刚好相反,有图像没声音,不过是不兼容某些手机,并不是全部,有人遇到过同样的情况吗

534123074@qq.com

534123074@qq.com

是不是视频格式问题?

要回复问题请先登录注册