关于网页上增加视频功能的代码

在开发网站上时候,不知道怎么在自己的网站上增加视频播放功能。后来找了许多资料,不管怎么说,还是在自己的网站上挂上了视频页面及播放窗口,尽管很小白,记录下来,以成长精进之用。

1直接利用优酷代码

如何在自己的网站上引用优酷视频http://www.chuangluo.com/news...

clipboard.png

先复制了一段html代码,发现不好调整位置,视频界面不在网页的中间位置;后来就复制了一段通用代码

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

在这段通用代码中,可以通过heidht及width来调整视频界面的大小。
本来想在在indexcontroller.php中增加字符串截取代码,可以获得src中的网址,后为了简单起见,降低我初学小白的代码难度。就走了捷径。设计一项参数输入。在video.blade.php中直接写成:

<iframe height=498 width=510 src='{{$field->video_src}}' frameborder=0 'allowfullscreen'></iframe>

简单地解决了引入视频播放画面的困局。

2利用H5自带的视频播放功能

这个没有研究,只记得当时学习HTML5的时候有这个功能;开发网站的时候就没有深究。这个以后可以学习一下

不过在视频检索的时候这个网站上的问答页面看到了一个比较好的视频播放代码。感觉不错,就保存了下来。

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

http://media.w3.org/2010/05/s...

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值