工作開發(fā)中要做前端展示優(yōu)酷、土豆視頻，但遇到視頻尺寸不能自適應(yīng)，研究了一下，有以下兩種方法符合自己的需要：

首先看一下優(yōu)酷、土豆分享視頻的html代碼：

1、優(yōu)酷：

<iframe height=498 width=510 src="http://player.youku.com/embed/XMTU1MDgzMjM5Ng==" frameborder=0 allowfullscreen></iframe>

2、土豆：

<iframe src="http://www.tudou.com/programs/view/html5embed.action?type=2&code=xQ5vDA_iuJk&lcode=RGsNNPq-7p0&resourceId=0_06_05_99" allowtransparency="true" allowfullscreen="true" allowfullscreenInteractive="true" scrolling="no" border="0" frameborder="0"></iframe>

...........

解決方法一，javascript實(shí)現(xiàn)：

獲取獲取瀏覽器顯示區(qū)域的高度，然后根據(jù)原視頻的高、寬比例，計(jì)算出新的高、寬，來調(diào)整iframe的尺寸

使用jquery代碼:

   $(function () {
             resizeIframe();
             $(window).resize(function () {
                 resizeIframe();
             });
         });

//調(diào)整iframe尺寸的方法
 function resizeIframe() {
            var expectWidth = $(document).width() * 0.9; //總寬度為屏幕寬度的0.9倍
          
            $("iframe").each(function () {
                expectWidth = $(this).parent().width();
                $(this).height(expectWidth * $(this).height() / $(this).width());
                $(this).width(expectWidth);
            });
        }

不使用jquery的代碼，比較麻煩一點(diǎn)：

function resizeIAllframe() {
             var clientWidth = document.body.clientWidth;
             clientWidth = clientWidth.toString().replace("px", "");
             clientWidth = clientWidth * 0.9;
             console.log(clientWidth);

             for (var j = 0; j < document.getElementsByTagName("iframe").length ; j++) {
                 resizeVideo(document.getElementsByTagName("iframe")[j], clientWidth);
             }
         }

         function resizeIframe(objElement, exepectWidth) {
             var flag = 0; //是否style中定義高寬
             var height = objElement.height;
             var width;
             if (!height) {
                 height = objElement.style.height;
                 flag = 1;
             }
             if (flag) {
                 width = objElement.style.width;
             } else {
                 width = objElement.width;
             }

             if (width) {
                 width = width.replace("px", "");
             }
             if (height) {
                 height = height.replace("px", "");
             }
             if (flag) {
                 objElement.style.width = exepectWidth + "px";
                 objElement.style.height = (exepectWidth * height / width) + "px";

             } else {
                 objElement.width = exepectWidth + "px";
                 objElement.height = (exepectWidth * height / width) + "px";
             }
         }

//頁面加載完后執(zhí)行
 window.onload = function () {
            resizeIAllframe();
         };

//窗口尺寸調(diào)整時(shí)執(zhí)行
  window.onresize = function () {
             resizeIAllframe();
         };

第二種方法，后臺(tái)實(shí)現(xiàn)：

直接在服務(wù)器端用正則處理視頻的尺寸，前提是需要客戶端傳過來一個(gè)期望寬度

/// <summary>
        /// 轉(zhuǎn)換視頻的內(nèi)容，主要處理視頻的尺寸
        /// </summary>
        /// <param name="videoContent"></param>
        /// <returns></returns>
        private string ChangeVideoContent(string videoContent, int expectWidth)
        {
            //<iframe(.*?)</iframe>
            //height="(?<height>d*)"
            string iframePattern = @"<iframe(.*?)</iframe>";
            string heightPattern = @"height[:=][""]?(?<height>d*?)(px| |"")";
            string widthPattern = @"width[:=][""]?(?<width>d*?)(px| |"")";
            int sWidth, sHeight;

            return Regex.Replace(videoContent, iframePattern, t =>
                 {
                     var heightStr = Regex.Match(t.Value, heightPattern, RegexOptions.Singleline).Groups["height"].Value;
                     if (string.IsNullOrEmpty(heightStr))
                     {
                         return t.Value;
                     }
                     sHeight = int.Parse(heightStr);

                     var widthStr = Regex.Match(t.Value, widthPattern, RegexOptions.Singleline).Groups["width"].Value;
                     if (string.IsNullOrEmpty(widthStr))
                     {
                         return t.Value;
                     }
                     sWidth = int.Parse(widthStr);

                     string result = Regex.Replace(t.Value, heightPattern, p => p.Value.Replace(p.Groups["height"].Value, (sHeight * expectWidth / sWidth).ToString()), RegexOptions.Singleline);

                     result = Regex.Replace(result, widthPattern, p => p.Value.Replace(p.Groups["width"].Value, (expectWidth).ToString()), RegexOptions.Singleline);

                     return result;
                 }, RegexOptions.Singleline);
        }

每種方法都有自己的特點(diǎn)，自己感覺哪個(gè)合適用哪個(gè)。

總結(jié)

以上是生活随笔為你收集整理的如果转载优酷、土豆视频等，怎么让视频自适应宽度？的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。