最近需要在网页首页追加视频播放功能。 需要播放youtube视频。中间遇到一些波折。特来分享一下。

首先像网页添加视频文件我们通常够采用embed标签。 标签里可以设置很多的关键子。我们可以配置为flash插件。但在底版本的pad上就无法正常播放视频了。

后来在发现youtube player api。确实是个好东西。

https://developers.google.com/youtube/player_parameters?hl=zh-CN

嵌入式插件播放视频。不得不说flash是个好东西。但pad无法正常播放,我们网站开发人员比较头疼的东西。

<object width="425" height="344">
<param name="movie" value="https://www.youtube.com/v/u1zgFlCw8Aw?fs=1"</param>
<param name="allowFullScreen" value="true"></param>
<embed src="https://www.youtube.com/v/u1zgFlCw8Aw?fs=1"
type="application/x-shockwave-flash"
allowfullscreen="true"
width="425" height="344">
</embed>
</object>

由于pad不能看视频所以这个方案只能废弃了。那么如果让pad看能。
https://developers.google.com/youtube/youtube_player_demo?hl=zh-CN

这个页面给我提供了主要思路。

<iframe id="ytplayer" type="text/html" width="640" height="360"
src="https://www.youtube.com/embed/M7lc1UVf-VE"
frameborder="0" allowfullscreen>我们通过ifram来实现。通过他来测试,我们既可以在pc 和pad正常播放youtube视频了。

播放视频有遇到了一些麻烦。 当我们播放完的时候,youtube会默认的将其他视频的列表放到我们的视频尾部。在embed中我们发现了很多配置。

但用youtube播放时这些属性标签是不起作用的。那怎么办。程序员的艰辛只有你懂得。找吧。

https://developers.google.com/youtube/player_parameters?hl=zh-CN

当我看到这个文章的时候眼前一亮。 原来youtube是采用url参数 配置的。想要什么效果传递参数即可。

那就实施吧。

<iframe id="ytplayer" width="" height="" src="https://www.youtube.com/embed/视频编号?rel=0&loop=1"></iframe>

rel 去除播放完显示的其他视频列表

loop 循环播放

autostart  加载完自动播放

自己去设置把。

附上效果图

谈谈网站插入youtube视频播放的更多相关文章

  1. 网页中插入Flvplayer视频播放器代码

    http://blog.csdn.net/china_skag/article/details/7424019 原地址:http://yuweiqiang.blog.163.com/blog/stat ...

  2. 由12306.cn谈谈网站性能技术

    12306.cn网站挂了,被全国人民骂了.我这两天也在思考这个事,我想以这个事来粗略地和大家讨论一下网站性能的问题.因为仓促,而且完全基于本人有 限的经验和了解,所以,如果有什么问题还请大家一起讨论和 ...

  3. 谈谈网站测试中的AB测试方法

    什么是A/B测试? A / B测试,即你设计的页面有两个版本(A和B),A为现行的设计, B是新的设计.比较这两个版本之间你所关心的数据(转化率,业绩,跳出率等) ,最后选择效果最好的版本. A / ...

  4. Ajax.ActionLink 用法

    Ajax.ActionLink 用法 Ajax 属性的ActionLink方法可以创建一个具有异步行为的锚标签. ActionLink方法的第一个参数指定了链接文本,第二个参数是要异步调用的操作的名称 ...

  5. 优酷、YouTube、Twitter及JustinTV视频网站架构设计笔记

    本文是整理的关于优酷.YouTube.Twitter及JustinTV几个视频网站的架构或笔记,对于不管是视频网站.门户网站或者其它的网站,在架构上都有一定的参考意义,毕竟成功者的背后总有值得学习的地 ...

  6. 优酷、YouTube、Twitter及JustinTV几个视频网站的架构

      优酷视频网站架构 一.网站基本数据概览据2010年统计,优酷网日均独立访问人数(uv)达到了8900万,日均访问量(pv)更是达到了17亿,优酷凭借这一数据成为google榜单中国内视频网站排名最 ...

  7. react & youtube

    react & youtube https://www.npmjs.com/package/react-youtube https://developers.google.com/youtub ...

  8. Windows Azure 微软公有云体验(一) 网站、SQL数据库、虚拟机

    Windows Azure 微软公有云已经登陆中国有一段时间了,现在是处于试用阶段,Windows Azure的使用将会给管理信息系统的开发.运行.维护带来什么样的新体验呢? Windows Azur ...

  9. FaceBook要在视频领域打败YouTube?

    据<纽约时报>报道,FaceBook正在探索一项新的策略来直接把音乐视频嵌入到用户的News Feeds中.目前,具有代表性的视频网站有YouTube和Vimeo,它们可以在社交网络上分享 ...

随机推荐

  1. Intel项目所用jquery小知识点总结

    1.$("#tdGeo input[type='checkbox']:checked")   ---筛选出所有已经Check的Checkbox 2.$("#tdCount ...

  2. struct vs class

    关于默认访问权限class中默认的成员访问权限是private的,而struct中则是public的. 关于继承方式class继承默认是private继承,而struct继承默认是public继承. ...

  3. MMO可见格子算法

    看注释吧,写的很清楚了 using System; using System.Collections.Generic; using System.Diagnostics; using System.L ...

  4. java -jar jenkins.war

    //设置jenkins主目录,并启动 #! /bin/sh CurrentDir=`dirname $` export JENKINS_HOME=$CurrentDir/jenkins_home ec ...

  5. FastReport 使用技巧篇

    使用技巧篇 1.FastReport中如果访问报表中的对象?       可以使用FindObject方法.      TfrxMemoView(frxReport1.FindObject('memo ...

  6. 整数划分问题-解法汇总(暂有DP-递归)

    整数划分问题是一个锻炼组合数学,递归以及动态规划很好的例子,虽然问题看似简单,但是其中玄机万千,有人转化成为背包问题,有人用生成函数解,有人以此作为企业面试题目,可见这种问题的认可度还是很高的. 整数 ...

  7. 20145213《Java程序设计》实验二Java面向对象程序设计实验报告

    20145213<Java程序设计>实验二Java面向对象程序设计实验报告 实验内容 初步掌握单元测试和TDD 理解并掌握面向对象三要素:封装,继承,多态 初步掌握UML建模 熟悉S.O. ...

  8. 【XLL API 函数】 xlGetInst

    返回正在调用 DLL 的 Excel 实例的实例句柄. 原型 Excel4(xlGetInst, LPXLOPER pxRes, 0); /* returns low part only */ Exc ...

  9. ios 宏定义 系统版本 判定

    当需要判断iOS系统版本的时候,相信很多人都会这么干: #define SystemVersion [[UIDevice currentDevice] systemVersion].floatValu ...

  10. IOS - AFN

    #import "ViewController.h"#import "AFNetworking.h"#import "SSZipArchive.h&q ...