Markdown中如何插入视频 iframe video

野性酷女 2024-02-19 20:11 60阅读 0赞

版权声明：本文为北岛向南(www.zhouie.cn)原创文章，未经博主允许不得转载。                    https://blog.csdn.net/jave_f/article/details/79048705                </div>
                          <link rel="stylesheet" href="https://csdnimg.cn/release/phoenix/template/css/ck_htmledit_views-cd6c485e8b.css">
                              <div id="content_views" class="markdown_views">
            
            <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
              <path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path>
            </svg>
            <h2 id="关于markdown中如何插入视频这一问题">关于<strong><em>Markdown中如何插入视频这一问题</em></strong></h2>

--------------------

>   网上众说纷纭，一直也没找到一个确切的答案，想来也是，这些东西毕竟还不算成熟、各种以前提供过的方法现在来讲，可能在更新或是关闭大潮中又没了

而且，Markdown 这种结构，在不同的博客等可支持平台上，似乎某些细微之处或是一些特有规定也是不尽相同的。

#####  话不多说，下面直接给出几个**展示效果**！ #####

--------------------

######   效果一 ######

height="450" width="800" src="http://player.youku.com/embed/XMzMxMjE0MjY4NA==" allowfullscreen="">

源代码

--------------------

######   效果二 ######

width="800" height="450" src="https://v.miaopai.com/iframe?scid=SvyHaHOczsp7B6ftW86oqMMz62-h5ai6~Fwp8A\_\_" allowfullscreen=""> <br/>&\#10;  
  源代码

--------------------

#####  下面两段代码在CSDN博客中由Markdown编写显示无效！ #####

#####  但需要说明的是: #####

--------------------

> 大家可能看出来了，这段代码与效果一中那段代码神相似，在测试这两者的时候，起先我也是百思不得解，明明差不多样，怎么一个就可以正常插入视频，一个就什么都没有呢？  
> 仔细点看，就会发现区别就在对应【'allowfullscreen' 、  
> src='[http://player.youku.com/embed/XMzMxMjE0MjY4NA==][http_player.youku.com_embed_XMzMxMjE0MjY4NA]'】这两个地方的单引号与双引号之别  
> 因为啊，从优酷那里复制得到的代码，就是用的这个单引号 - | -。

![从优酷那里复制代码][SouthEast]

> 而！不幸的是，这种写法在这里是识别不了的 : ( ，必须要依照效果一中那种（双引号）。  
> 需要指出的是，这段代码在我对[Github Pages 搭建的博客][Github Pages]中的 \* . md文件（就是Markdown文件）做测试时，也是无效的…. : (

PS: 如果大家有不同情况的，欢迎[与我联系][Link 1] !

--------------------

> 需要指出的有  
> 1. 这段代码在我对[Github Pages 搭建的博客][Github Pages]中的 \* . md文件（就是Markdown文件）做测试时，竟在接连很多次的失败中意外成功了！: )  
> 2. 对于CSDN博客中（Markdown编写）依然无效…  
> 3. 因为我这段时间正在配置以及丰富我的[GitHub Blog][Github Pages](由Jekyll 驱动，整体框架在网上有很多教程与资源)，在测试到**在about.md文件中添加在线视频**这一功能模块时，遇阻。幸好最后这一问题得到解决，这也就是为什么写这篇blog 的缘由所在。  
> **特别感谢**:  
> \[秒拍\] （[http://www.miaopai.com/u/mob\_35611282][http_www.miaopai.com_u_mob_35611282]）在我很困惑、烦躁的时候冒了出来

<video id="video" controls="" preload="none" poster="http://media.w3.org/2010/05/sintel/poster.png">
      <source id="mp4" src="http://gslb.miaopai.com/stream/PAEyMDoxMSB9hV6BVT1l5SHT-sMVVRVgHlL7bA__.mp4?mpflag=64&vend=1&os=3&partner=1&platform=2&cookie_id=&refer=miaopai&scid=PAEyMDoxMSB9hV6BVT1l5SHT-sMVVRVgHlL7bA__ " type="video/mp4">
    </video>
     
     
      
     
     
      
       1 
       2 
       3

--------------------

#####   补充说明 #####

从sf上截取下来的一段论述以及对应代码，如下：

>  youku和tudou目前不支持。  
>  目前只支持HTML的video标签，例如：

[原文链接][Link 2]

<video id="video" controls="" preload="none"
            poster="http://media.w3.org/2010/05/sintel/poster.png">
             <source id="mp4" src="http://media.w3.org/2010/05/sintel/trailer.mp4" 
                 type="video/mp4">
              <source id="webm" src="http://media.w3.org/2010/05/sintel/trailer.webm" 
                  type="video/webm">
              <source id="ogv" src="http://media.w3.org/2010/05/sintel/trailer.ogv" 
                  type="video/ogg">
              <p>Your user agent does not support the HTML5 Video element.</p>
        </video>
     
     
      
     
     
      
       1 
       2 
       3 
       4 
       5 
       6 
       7 
       8 
       9 
       10

>  说明：这段代码在CSDN博客上没能成功，在GitHub Pages 我要去测试实现的关于about.md添加视频是成功的。（耸耸肩…  
>  在GitHub Pages中Markdown文件中成功添加视频，在线展示见 [Here][] .

--------------------

#####  相关链接 #####

1.  [Markdown中如何插入视频？][Link 2]
2.  [segmentfault 文章中如何插入视频][segmentfault]
3.  [Markdown插入视频][Markdown]

--------------------

#####  友情链接 #####

1.  完整版: 搭建自己的username.github.io博客
2.  [北岛Y向南的秒拍视频\_秒拍][http_www.miaopai.com_u_mob_35611282]
3.  [我的自频道-优酷视频][-]

--------------------

#####   补充 - - - 站外视频/iframe/web内嵌内容响应式代码 #####

> 从网上来看，似乎这项技术快要淘汰了（因为以前也没接触过这个东西，不好多评论），主要是我现在需要用到这项功能，所以就先把眼前问题解决掉吧，至于其中的一些优化或改进在以后还可以慢慢整.

在响应式设计的网页布局中有一些元素没有发挥好，直接损坏响应式设计的布局。其中之一就是iframe元素，因为有时候你需要在页面中嵌入外部资源，比如说站外视频（优酷，腾讯视频等），这个时候就需要用到iframe元素。

JavaScript的办法就不讲了，主要说下如使用CSS将嵌套进来的内容具有响应式的效果，比如说视频等能随着浏览器的视窗自动调整。

width=“640” height=“498” src=“http://v.qq.com/iframe/player.html?vid=q0167swo7g2&tiny=0&auto=0”>

iframe中包含了width和height属性。移除这两个属性，iframe会不显示。

--------------------

width属性意味着，当屏幕小于640px的时候，嵌入的内容会超出容器，将打破整个布局。接下来使用CSS的方法来解决这个问题。为了能让嵌入的视频在Web中实现响应式效果，需要在iframe标签外添加一个容器div来包裹他。其结构类似这样：

<div>
    <iframe width="640" height="498" src="http://v.qq.com/iframe/player.html?vid=q0167swo7g2&tiny=0&auto=0"></iframe>
    </div>
     
     
      
     
     
      
       1 
       2 
       3

我们给包含iframe的div容器添加一个类名video-container。

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
    }
     
     
      
     
     
      
       1 
       2 
       3 
       4 
       5 
       6 
       7

设置position的值为relative，用来给iframe设置为absolute值；  
  设置padding-bottom值来计算视频的纵横比例。在我们的示例中，宽高的比例是16:9，表示高度是宽度的56.25%。如果宽高比是4:3，我们设置padding-bottom值为75%；

设置padding-top值为30px，主要为Chrome指定一个空间；  
height设置为０，因为我们通过padding-bottom来设置元素的高度。我们没有设置width，那是因为他要配合响应式设计自动调整容器的宽度；

设置overflow的值为hidden，确保溢出的内容能够隐藏起来。  
也要给iframe自身设置样式。在你的样式文件中添加下面的样式代码：

.video-container iframe {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
    }
     
     
      
     
     
      
       1 
       2 
       3 
       4 
       5 
       6 
       7

iframe放置在div.video-container容器里：

使用绝对定位，那是因为包含他的容器的高度为０，如果iframe进行正常的定位，我们将给他的高度也是0;  
  设置top和left，将iframe定位在容器的正确位置上；  
  设置width和height值为100%，确保视频占满所用容器空间(实际是设置padding-bottom)的100%。

这样做之后，视频将根据屏幕的宽度进行调整。([原文链接][Link 3])

【附：一文一图】  
![House][]

[http_player.youku.com_embed_XMzMxMjE0MjY4NA]: http://player.youku.com/embed/XMzMxMjE0MjY4NA==
[SouthEast]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/28b8589eccd04043bff3e3058d092e5a.png
[Github Pages]: https://javef.github.io
[Link 1]: http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=CTs9ODAxPDo_Oz5JeHgnamZk
[http_www.miaopai.com_u_mob_35611282]: http://www.miaopai.com/u/mob_35611282
[Link 2]: https://segmentfault.com/q/1010000000424925?sort=created#answers-title
[Here]: https://javef.github.io/about/
[segmentfault]: https://segmentfault.com/q/1010000008717851
[Markdown]: http://blog.csdn.net/FreedLI/article/details/74016679
[-]: http://i.youku.com/javef0903
[Link 3]: https://www.hackhp.com/808.html
[House]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/d5eabe12824146d18389277a8db4da8c.png