zoukankan      html  css  js  c++  java
  • Markdown中如何插入视频 > iframe?

    关于Markdown中如何插入视频这一问题


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

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

     话不多说,下面直接给出几个展示效果


      效果一

      

      源代码

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

      效果二

      
      源代码

    <iframe 
        width="800" 
        height="450" 
        src="https://v.miaopai.com/iframe?scid=SvyHaHOczsp7B6ftW86oqMMz62-h5ai6~Fwp8A__"
        frameborder="0" 
        allowfullscreen>
    </iframe>

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

     但需要说明的是:


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

    从优酷那里复制代码

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

    PS: 如果大家有不同情况的,欢迎与我联系 !

    <iframe 
        height=450 
        width=800 
        src='http://player.youku.com/embed/XMzMxMjE0MjY4NA==' 
        frameborder=0 
        'allowfullscreen'>
    </iframe>

    需要指出的有
    1. 这段代码在我对Github Pages 搭建的博客中的 * . md文件(就是Markdown文件)做测试时,竟在接连很多次的失败中意外成功了!: )
    2. 对于CSDN博客中(Markdown编写)依然无效…
    3. 因为我这段时间正在配置以及丰富我的GitHub Blog(由Jekyll 驱动,整体框架在网上有很多教程与资源),在测试到在about.md文件中添加在线视频这一功能模块时,遇阻。幸好最后这一问题得到解决,这也就是为什么写这篇blog 的缘由所在。
    特别感谢:
    [秒拍] (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&amp;vend=1&amp;os=3&amp;partner=1&amp;platform=2&amp;cookie_id=&amp;refer=miaopai&amp;scid=PAEyMDoxMSB9hV6BVT1l5SHT-sMVVRVgHlL7bA__ " type="video/mp4">
    </video>

      补充说明

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

     youku和tudou目前不支持。
     目前只支持HTML的video标签,例如:

    原文链接

        <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>

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


     相关链接

    1. Markdown中如何插入视频?
    2. segmentfault 文章中如何插入视频
    3. Markdown插入视频

     友情链接

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

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

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

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

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

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

     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>

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

    .video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
    }

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

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

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

    .video-container iframe {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
    }

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

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

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



    【附:一文一图】
    House

  • 相关阅读:
    HBase with MapReduce (MultiTable Read)
    HBase with MapReduce (SummaryToFile)
    HBase with MapReduce (Summary)
    HBase with MapReduce (Read and Write)
    HBase with MapReduce (Only Read)
    Hbase中的BloomFilter(布隆过滤器)
    HBase的快照技术
    How To Use Hbase Bulk Loading
    Cloudera-Manager修改集群的IP
    Java中的HashSet和TreeSet
  • 原文地址:https://www.cnblogs.com/zhouie/p/8955797.html
Copyright © 2011-2022 走看看