首页技术博客 技术教程 正文

H5页面嵌入视频 (包括: 本地视频, 第三方视频) 的几种方式

2018-10-20 3059 0条评论

  最近在要做一个在H5页面中嵌入第三方视频的功能,用户可以观看点赞等操作。由于本人目前在此方面初次了解,所以写下本文以供互相学习交流,有不对的地方,可留言对我进行指导(大神勿喷)。好了话不多说,关于H5页面嵌入视频几种方法,我在网上查了资料并整理到如下两类:


第一类:ifame嵌入 -- 支持嵌入第三方视频以及本地视频。

直接上代码:


    <!-- 使用iframe嵌入本地视频 -->

    <div style="width: 500px;height: 380px;margin: 0px auto;">

        <iframe width="500px" height="380px" src="mda-ic3eip66u80zeutr.mp4" frameborder=0 allowfullscreen></iframe>

    </div>

 

    <!-- 使用iframe嵌入第三方视频(例如:优酷视频、腾讯视频、土豆视频) -->

    <div style="width: 500px;height: 380px;margin: 0px auto;">

        <iframe width="500px" height="380px" src="http://player.youku.com/embed/XMzcwNTY3NTM2MA" frameborder=0 allowfullscreen></iframe>

    </div>

  效果如下图:




111111222222222222.png


  1.1:第一种就是iframe嵌入本地视频的demo,直接在iframe的src中填写视频在项目中的地址并加上allowfullscreen属性即可。(关于allowfullscreen属性的作用,在后面的内容中会解释)


1.2:第二种就是我目前需求所需要的,可以在H5页面中嵌入第三方视频的方法。这里以优酷视频为例,首先在iframe的src中填写优酷视频引用链接,格式如下:


http://player.youku.com/embed/XMzcwNTY3NTM2MA


绿色部分是优酷通用的引用链接(不用修改),红色部分填写你想嵌入视频的ID。(下方有获取优酷视频ID的教程)


第二类:<video>标签嵌入 -- (仅支持嵌入本地视频)

  代码:



<!-- 使用video嵌入本地视频 -->

    <div style="width: 500px;height: 380px;margin: 250px auto;">

        <video src="mda-ic3eip66u80zeutr.mp4" type="video/mp4" controls autoplay width="500px" height="380px" >

            抱歉,你的浏览器不支持video标签。。

        </video>

    </div>

  效果:


2.png


  2.1:video标签嵌入本地视频的话,直接在video的src中填写视频在项目中的地址即可,目前video标签嵌入视频的话不支持嵌入第三方视频,我试过将iframe的src里的优酷视频链接放到video的标签中,运行的时候无法播放。


好了,以上就是H5嵌入视频的几种方法,各位可根据自己的需要选择适合自己的方法,下面是关于获取优酷视频ID以及我对allowfullscreen属性和video标签属性的理解,想深入了解的小伙伴可以继续围观...


 


获取优酷视频ID教程


https://jingyan.baidu.com/article/0320e2c1246e1b1b87507b85.html,(百度经验)。



如链接失效,我的方法是:打开优酷官网:搜索你想嵌入的视频


3.png


 


点击搜索后注意地址栏,红框区域就是你想要的了

4.png



 关于iframe的allowfullscreen属性


关于该属性网上的解释是:允许全屏=true。也就是允许全屏,=false时表示不允许全屏。我加上该属性之后iframe好像没有什么变化。。。不知道是我用法不对还是我已经定义了宽度了,总之加不加好像对我影响不大,有对该属性了解的童鞋,欢迎在下方留言评论。


关于video标签的controls和autoplay属性


 controls属性:个人理解表示显示播放控件(如:播放按钮,音量条等)


 autoplay属性:表示是否需要自动播放


The End

好了,本文到此结束,感谢各位读者的支持!(转载请注明出处,谢谢)



文章版权及转载声明

本文作者:符文浩 网址:http://blog.fuwenhao.com/post/163.html 发布于 2018-10-20
文章转载或复制请以超链接形式并注明出处。

发表评论

快捷回复:

评论列表 (暂无评论,3059人围观)参与讨论

还没有评论,来说两句吧...

取消
微信二维码
微信二维码
支付宝二维码