谈谈网站插入youtube视频播放
最近需要在网页首页追加视频播放功能。 需要播放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视频播放的更多相关文章
- 网页中插入Flvplayer视频播放器代码
http://blog.csdn.net/china_skag/article/details/7424019 原地址:http://yuweiqiang.blog.163.com/blog/stat ...
- 由12306.cn谈谈网站性能技术
12306.cn网站挂了,被全国人民骂了.我这两天也在思考这个事,我想以这个事来粗略地和大家讨论一下网站性能的问题.因为仓促,而且完全基于本人有 限的经验和了解,所以,如果有什么问题还请大家一起讨论和 ...
- 谈谈网站测试中的AB测试方法
什么是A/B测试? A / B测试,即你设计的页面有两个版本(A和B),A为现行的设计, B是新的设计.比较这两个版本之间你所关心的数据(转化率,业绩,跳出率等) ,最后选择效果最好的版本. A / ...
- Ajax.ActionLink 用法
Ajax.ActionLink 用法 Ajax 属性的ActionLink方法可以创建一个具有异步行为的锚标签. ActionLink方法的第一个参数指定了链接文本,第二个参数是要异步调用的操作的名称 ...
- 优酷、YouTube、Twitter及JustinTV视频网站架构设计笔记
本文是整理的关于优酷.YouTube.Twitter及JustinTV几个视频网站的架构或笔记,对于不管是视频网站.门户网站或者其它的网站,在架构上都有一定的参考意义,毕竟成功者的背后总有值得学习的地 ...
- 优酷、YouTube、Twitter及JustinTV几个视频网站的架构
优酷视频网站架构 一.网站基本数据概览据2010年统计,优酷网日均独立访问人数(uv)达到了8900万,日均访问量(pv)更是达到了17亿,优酷凭借这一数据成为google榜单中国内视频网站排名最 ...
- react & youtube
react & youtube https://www.npmjs.com/package/react-youtube https://developers.google.com/youtub ...
- Windows Azure 微软公有云体验(一) 网站、SQL数据库、虚拟机
Windows Azure 微软公有云已经登陆中国有一段时间了,现在是处于试用阶段,Windows Azure的使用将会给管理信息系统的开发.运行.维护带来什么样的新体验呢? Windows Azur ...
- FaceBook要在视频领域打败YouTube?
据<纽约时报>报道,FaceBook正在探索一项新的策略来直接把音乐视频嵌入到用户的News Feeds中.目前,具有代表性的视频网站有YouTube和Vimeo,它们可以在社交网络上分享 ...
随机推荐
- Intel项目所用jquery小知识点总结
1.$("#tdGeo input[type='checkbox']:checked") ---筛选出所有已经Check的Checkbox 2.$("#tdCount ...
- struct vs class
关于默认访问权限class中默认的成员访问权限是private的,而struct中则是public的. 关于继承方式class继承默认是private继承,而struct继承默认是public继承. ...
- MMO可见格子算法
看注释吧,写的很清楚了 using System; using System.Collections.Generic; using System.Diagnostics; using System.L ...
- java -jar jenkins.war
//设置jenkins主目录,并启动 #! /bin/sh CurrentDir=`dirname $` export JENKINS_HOME=$CurrentDir/jenkins_home ec ...
- FastReport 使用技巧篇
使用技巧篇 1.FastReport中如果访问报表中的对象? 可以使用FindObject方法. TfrxMemoView(frxReport1.FindObject('memo ...
- 整数划分问题-解法汇总(暂有DP-递归)
整数划分问题是一个锻炼组合数学,递归以及动态规划很好的例子,虽然问题看似简单,但是其中玄机万千,有人转化成为背包问题,有人用生成函数解,有人以此作为企业面试题目,可见这种问题的认可度还是很高的. 整数 ...
- 20145213《Java程序设计》实验二Java面向对象程序设计实验报告
20145213<Java程序设计>实验二Java面向对象程序设计实验报告 实验内容 初步掌握单元测试和TDD 理解并掌握面向对象三要素:封装,继承,多态 初步掌握UML建模 熟悉S.O. ...
- 【XLL API 函数】 xlGetInst
返回正在调用 DLL 的 Excel 实例的实例句柄. 原型 Excel4(xlGetInst, LPXLOPER pxRes, 0); /* returns low part only */ Exc ...
- ios 宏定义 系统版本 判定
当需要判断iOS系统版本的时候,相信很多人都会这么干: #define SystemVersion [[UIDevice currentDevice] systemVersion].floatValu ...
- IOS - AFN
#import "ViewController.h"#import "AFNetworking.h"#import "SSZipArchive.h&q ...