Question

我们要做的目标是让用户点击链接，然后在移动设备上全屏播放视频。

我无法使用Video.js在移动设备上始终如一地运行以下代码。我们正在使用brightcove，所以我需要动态设置视频元素源。如果最初设置了源，我可以使全屏工作，但即使这样也不一致。我们正在测试Android（Chrome，FireFox和默认浏览器）和iOS。对于它的价值，我们不需要支持桌面。

<!DOCTYPE html>
<html>
<head>
  <title>Video.js | HTML5 Video Player</title>
  <link href="video-js.css" rel="stylesheet" type="text/css">
  <script src="video.dev.js"></script>
  <script>
    videojs.options.flash.swf = "video-js.swf";
  </script>
</head>
<body>
<video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="640" height="264">
</video>
<a href="#" id="play" onclick="playVideo();" style="">play</a>
<script>

    var video = videojs("example_video_1", {}, function(){
    });
    video.on("fullscreenchange",eventTriggered);
    video.on("play",eventTriggered);

    function playVideo(){
        video.src({src:'http://video-js.zencoder.com/oceans-clip.mp4',type:'video/mp4'});
        video.play();
        video.requestFullScreen();
        return false;
    }
    function eventTriggered(e){
        console.log("event:"+e.type);
    }
</script>
</body>
</html>

代码变体

以下代码适用于FireFox和默认浏览器，但不适用于android。 iOS播放但不会触发fullscreenchange事件。

    var video = videojs("example_video_1", {}, function(){
        this.on("fullscreenchange",eventTriggered);
        this.on("play",eventTriggered);
        this.src({src:'http://video-js.zencoder.com/oceans-clip.mp4',type:'video/mp4'});
    });

    function playVideo(){
        video.play();
        video.requestFullScreen();
        return false;
    }

这也有零星的支持

    var video = videojs("example_video_1", {}, function(){
    });

    video.on("fullscreenchange",eventTriggered);
    video.on("play",eventTriggered);
    video.src({src:'http://video-js.zencoder.com/oceans-clip.mp4',type:'video/mp4'});

    function playVideo(){
        video.play();
        video.requestFullScreen();
        return false;
    }

编辑：进一步调查，在iOS上看起来使用本机技术。它似乎不像其他选择那样手动触发this.trigger('fullscreenchange');。

第3519-3523行video.dev.js

  } else if (this.tech.supportsFullScreen()) {
    // we can't take the video.js controls fullscreen but we can go fullscreen
    // with native controls
    this.techCall('enterFullScreen');
  } else {

视频requestFullScreen无法使用Video.js在移动设备上运行

0 个答案: