Question

我正试图在纵向模式（1080 * 1920）的chromecast上播放视频，因此旋转到90°。

使用CastVideos示例我试图让它正常显示，但我一直有一种奇怪的行为：视频在原始旋转中显示瞬间然后正确转动，就像在绘制视频的第一帧之后应用CSS一样。如何使我的视频直接显示其缩放和旋转？

这是我构建的简单接收器，它显示（或应该显示）旋转的视频：

    <html>
<head>
  <title>Example minimum receiver</title>
  <script src="//www.gstatic.com/cast/sdk/libs/receiver/2.0.0/cast_receiver.js"></script>
</head>
<body>

</body>
</html>

<!--
Copyright (C) 2014 Google Inc. All Rights Reserved.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

     http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
    body {
    overflow:hidden;
    }
    div{
        height:720PX;
        width:1280PX;
        color:#FFFFFF;
        background-color:#000000;
    }

    video
    {
        margin-top:720px;
        -webkit-transform: scale(0.666) rotate(-90deg);
        -webkit-transform-origin: 0 0;

    }
    </style>
    <title>Cast Hello Text</title>
  </head>
  <body>
    <script type="text/javascript" src="//www.gstatic.com/cast/sdk/libs/receiver/2.0.0/cast_receiver.js"></script>
    <video id='media'/>
    <script>
    window.onload = function() {
      window.mediaElement = document.getElementById('media');
      window.mediaManager = new cast.receiver.MediaManager(window.mediaElement);
      window.castReceiverManager = cast.receiver.CastReceiverManager.getInstance();
      window.castReceiverManager.start();
        // handler for the 'ready' event
    castReceiverManager.onReady = function(event) {
          console.log('Received Ready event: ' + JSON.stringify(event.data));
          window.castReceiverManager.setApplicationState("Application status is ready...");
        };


    // handler for 'senderconnected' event
    castReceiverManager.onSenderConnected = function(event) {
      console.log('Received Sender Connected event: ' + event.data);
      console.log(window.castReceiverManager.getSender(event.data).userAgent);
    };

    // handler for 'senderdisconnected' event
    castReceiverManager.onSenderDisconnected = function(event) {
      console.log('Received Sender Disconnected event: ' + event.data);
      if (window.castReceiverManager.getSenders().length == 0) {
        window.close();
      }
    };

    // handler for 'systemvolumechanged' event
    castReceiverManager.onSystemVolumeChanged = function(event) {
      console.log('Received System Volume Changed event: ' + event.data['level'] + ' ' +
          event.data['muted']);
    };

    // create a CastMessageBus to handle messages for a custom namespace
    window.messageBus = window.castReceiverManager.getCastMessageBus('*******my_cast_namespace*******');

    // handler for the CastMessageBus message event
    window.messageBus.onMessage = function(event) {
      console.log('Message [' + event.senderId + ']: ' + event.data);
      // display the message from the sender
      showVideo(event.data);
      // inform all senders on the CastMessageBus of the incoming message event
      // sender message listener will be invoked
      //window.messageBus.send(event.senderId, event.data);
    }

    // initialize the CastReceiverManager with an application status message
    window.castReceiverManager.start({statusText: "Application is starting"});
    console.log('Receiver Manager started');

  function showVideo(video) {
    console.log(video.src);
    document.getElementById("media").src=video;
    window.castReceiverManager.setApplicationState("Application is playing");
  };
  };
    </script>
  </body>
</html>

这里重要的部分是旋转视频的代码：

video
{
   margin-top:720px;
   -webkit-transform: scale(0.666) rotate(-90deg);
   -webkit-transform-origin: 0 0;       
}

仅在视频的第一帧加载到屏幕后才会应用？=＆gt;因此，在旋转和播放之前，视频会以其原始位置闪烁。

我在Chrome上没有遇到过这种情况，Chromecast的Chrome版本是否存在错误？

在Chromecast上旋转视频

0 个答案: