Question

是否可以在不导致视频刷新的情况下从外部源调整正在运行的Flash视频的大小？对不起新手问题。

到目前为止我尝试过但失败了。

HTML：

<html>
<head>
<script type="text/javascript" src="js/jquery.js" ></script>
<script type="text/javascript" src="js/streams.js" ></script>
<link href="style/stream.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <ul id="main">
        <li id="one" class="video-player">
        <!--AVENGERS TRAILER-->
        <iframe width="560" height="315" src="http://www.youtube.com/embed/NPoHPNeU9fc" frameborder="0" allowfullscreen></iframe>
        </li>
    </ul>
    <ul id="streams">
        <li id="two" class="video-player">
          2    
        </li>

        <li id="three" class="video-player">
        3
        </li>

        <li id="four" class="video-player">
        4
        </li>

        <li id="five" class="video-player">
        5
        </li>
    </ul>
</body>
</html>

CSS：

*{
    padding:0px;
    margin:0px;
}

#streams , #main{
    list-style:none;
    float:left;
    width: 100%;
}
.video-player{
    background-color:#666;
    float:left;
    height:390px;
    width:640px;
    margin:10px;
}

#main>li.video-player{
    zoom:100%;
}

#streams>li.video-player{
    zoom:50%;
}

JS脚本。（未完成，当我看到它导致视频刷新时停止）它只是通过将div从父div移动到另一个div来更改div的缩放属性。

$(document).ready(function() {
    $('.video-player').click(function() {

    var parentid = $(this).parent().attr("id");

    // Get the id of the div that was clicked
    var cliked = $(this).attr("id");
    var nextdiv = $(this).next().attr("id");
    var prevdiv = $(this).prev().attr("id");
    // Check the parent .
    if (parentid == "streams" ){
        $("#"+cliked).appendTo("#main");
        };
    if (parentid == "main" ){
        $("#"+cliked).appendTo("#streams");
        };
    });
    return false;
});

非常感谢任何帮助。

Answer 1

由于您只是在iFrame中嵌入视频，因此更改iframe的宽度和高度属性没有问题，因此可以调整嵌入内容（您的YouTube视频）的大小，而不会产生任何不必要的影响内容本身。

我为你写了一个小测试，只是为了确定：

var sizeIncreaseFactor = 1.05;

function resizeIframe(){
    var myFrame = document.getElementById('myVideo');
    myFrame.width = parseInt(myFrame.width) * sizeIncreaseFactor;
    myFrame.height = parseInt(myFrame.height) * sizeIncreaseFactor;
}

<input type="button" onClick="resizeIframe();" value="Click to increase video size"></input>
<br />
<iframe id="myVideo" width="420" height="315" src="http://www.youtube.com/embed/_9bB7r0M9kg" frameborder="0" allowfullscreen></iframe>

在不刷新视频的情况下调整从外部源运行Flash视频的大小

1 个答案: