FLASH视频自适应宽高度及添加相应自定义按钮教程

投稿  龙笑天下 2016-12-29 07:22 阅读 169 次 评论 16 条

最近经常有网友询问,我的视频是怎样做到自适应宽高度的?在此龙笑天下就来说下具体的实现方法,及给后台文章文本编辑器添加按钮的方法技巧!

FLASH视频自适应宽高度及添加相应自定义按钮教程

记得我当初也发现了这样的问题,通过视频网站分享的视频代码(embed、object或iframe方式)贴到文章里发布后,在电脑上看可能会好好的,但是在手机的浏览器上看就会超出屏幕。

表格还好直接用百分比就可以自适应,但是iframe的宽度属性设置了百分比的话,高度不能自适应屏幕。把高度设置成百分比,就会出现一个长方形的视频,自己试过就知道了。

网上也有一大堆的解决办法,尝试了很多发现起作用的并没有几个,也没有能让我满意的适用所有网站的方法。

后来终于找到一篇文章解决了这个问题,原来视频自适应这么简单,只需要一段css代码就ok了.方法来自 @墨鱼部落格

视频自适应方法

首先,在主题的主css,如style.css中加入以下css代码:

  1. .lxtx-video {
  2.     position:relative;
  3.     padding-bottom:56.25%;
  4.     height:0;
  5.     overflow:hidden;
  6. }
  7. .lxtx-video iframe,.lxtx-video object,.lxtx-video embed {
  8.     position:absolute;
  9.     top:0;
  10.     left:0;
  11.     width:100%;
  12.     height:100%;
  13. }

然后,后台发布视频时,建议以iframe方式引用视频网站的视频,因为iframe方式在pc端和手机端都能完美显示视频,另外2种方式就不一定了!在中文本模式编辑器里用下面的类似方法引用:

  1. <p class="lxtx-video"><iframe src="视频网站提供的iframe方式里的src链接" frameborder="0" allowfullscreen="allowfullscreen"></iframe></p>

以优酷视频为例,如这个视频:http://v.youku.com/v_show/id_XMTU2MzI4MTE5Ng==.html,用它的通用方式(也就是iframe方式),它提供的代码如下:

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

那么我们要在文章中插入自适应视频的话,在文本编辑器中要插入以下代码就ok了:

  1. <p class="lxtx-video"><iframe src="http://player.youku.com/embed/XMTU2MzI4MTE5Ng==" frameborder="0" allowfullscreen="allowfullscreen"></iframe></p>

方法扩展:给后台文章文本编辑器添加按钮的方法

如果我们贴视频,每次都填写这么多代码的话,那不就既枯燥又麻烦死!那么怎么解决呢?

我们可以通过在后台文本编辑器上面加上一些按钮的方法来避免这种重复的输入,因为视频网站提供的视频引用代码都是有共同性的!

好了,直接给出比较全的代码吧,在functions.php中加入以下代码,就可以在后台文本编辑器上面加上下面这些短代码了:

FLASH视频自适应宽高度及添加相应自定义按钮教程 视频短代码按钮

  1. /**
  2.  * 使插入的FLASH视频自适应长宽及为后台编辑器添加自定义按钮
  3.  * http://www.ilxtx.com/how-to-insert-adaptive-video.html
  4.  */
  5. // wordpress后台HTML编辑器添加自定义快捷标签按钮
  6.  add_action('after_wp_tiny_mce', 'lxtx_bolo_after_wp_tiny_mce');
  7.  function lxtx_bolo_after_wp_tiny_mce($mce_settings) {
  8.     ?>
  9.     <script type="text/javascript">
  10.     QTags.addButton( 'youkushipinjm', 'youku',
  11.     '<p class="lxtx-video"><iframe src="http://player.youku.com/embed/视频特征ID" frameborder="0" allowfullscreen="allowfullscreen"></iframe></p>\n', "" );
  12.     QTags.addButton( 'acfunshipinjm', 'AcFun',
  13.     '<p class="lxtx-video"><iframe src="http://cdn.aixifan.com/player/ACFlashPlayer.out.swf?type=page&url=http://www.acfun.tv/v/视频特征ID" id="ACFlashPlayer-re" frameborder="0"></iframe></p>\n', "" );
  14.     QTags.addButton( 'qqshipinjm', 'QQ',
  15.     '<p class="lxtx-video"><iframe frameborder="0" src="通用代码中的src地址" allowfullscreen></iframe></p>\n', "" );
  16.     QTags.addButton( 'iqiyishipinjm', '爱奇艺',
  17.     '<p class="lxtx-video"><iframe src="通用代码中的src" frameborder="0" allowfullscreen="true"></iframe></p>\n', "" );
  18.     QTags.addButton( 'yinyuetaishipinjm', '音悦台',
  19.     '<p class="lxtx-video"><embed src="代码中的src" quality="high" align="middle"  allowScriptAccess="sameDomain" allowfullscreen="true" type="application/x-shockwave-flash"></embed></p>\n', "" );
  20.     QTags.addButton( 'souhushipinjm', '搜狐',
  21.     '<p class="lxtx-video"><iframe src="通用代码中的src" frameborder="0" allowfullscreen="allowfullscreen"></iframe></p>\n', "" );
  22.     QTags.addButton( '56shipinjm', '56',
  23.     '<p class="lxtx-video"><iframe src="http://www.56.com/iframe/视频特征ID" frameborder="0" allowfullscreen=""></iframe></p>\n', "" );
  24.     QTags.addButton( 'tudoushipinjm', 'tudou',
  25.     '<p class="lxtx-video"><iframe src="iframe代码中的src" frameborder="0" allowfullscreen="allowfullscreen"></iframe></p>\n', "" );
  26.     function bolo_QTnextpage_arg1() {
  27.     }
  28.     </script>
  29.     <?php
  30. }

友情提示:其它视频网站根据各自视频网站提供的引用方式代码可自行增添修改吧!不仅是以上这些按钮,还可以加入一些其它的功能按钮哦!

代码解析:
  1. QTags.addButton( '''''''' );

四对引号,分别表示按钮的ID、按钮显示名、点一下输入内容、再点一下关闭内容(最后一对引号为空则一次输入全部内容),\n表示换行;
形象说明:QTags.addButton( ' 按钮ID', '按钮显示名', '点一下输入内容', '点一下关闭内容' );
可以自定义添加多行QTags.addButton( '', '', '', '' );增加多个按钮!

文章标签: ,   ,  
原文地址:http://www.ilxtx.com/how-to-insert-adaptive-video.html
温馨提示:文章内容仅代表作者个人观点,不代表boke112导航赞同其观点和对其真实性负责!
版权声明:本文为投稿文章,感谢 龙笑天下 的投稿,版权归原作者所有,欢迎分享本文,转载请保留出处!
WordPress免费响应式主题:Nana

发表评论


表情

  1. 唯历史
    唯历史 【总理】 @回复

    现在h5流行,很久没了解flash了

  2. 靠谱学生兼职网
    靠谱学生兼职网 【市长】 @回复

    embed这个好像我有在用,还能禁止进入官网网站,以及禁止点它的广告

  3. 动感单车
    动感单车 【省长】 @回复

    汗,我的博客在此之前一直使用的是embed方式引用视频网站的视频,今后得改改了。

  4. 四川腊肉批发
    四川腊肉批发 【镇长】 @回复

    福利福利哈哈

  5. Koolight
    Koolight 【省长】 @回复

    视频站的福音!

  6. 分钱榜
    分钱榜 【县长】 @回复

    这个好,收藏下,说不定哪天就用上了

  7. 龙笑天
    龙笑天 【市长】 @回复

    我去,没抢到前排~~ [抓狂]

  8. 一介小民
    一介小民 【市长】 @回复

    麻烦,代码宽度100%就可以了

  9. 雅兮网
    雅兮网 【省长】 @回复

    这个不错 很实用,当前视频网站的代码大多都不完美

  10. 爱时尚
    爱时尚 【省长】 @回复

    这个会影响到网站加载速度吗

  11. 码农BTS
    码农BTS 【市长】 @回复

    现在貌似都开始用html5播放器了哈

  12. 明月登楼博客
    明月登楼博客 【总理】 @回复

    不错,我的主题好像就有这个问题!

  13. 金榜台博客
    金榜台博客 【市长】 @回复

    感谢分享,很实用哦

  14. 小萝博客
    小萝博客 【县长】 @回复

    占个沙发先