拍拍尘土

p.s. 测试了下，其实iframe方式微信里面并不支持，手机独立浏览器也没有去测试。自己服务器视频还是建议采用 video标签，兼容性比较好。第三方如腾讯，优酷就直接使用他们的通用视频代码好了。


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


第一类：ifame嵌入 -- 支持嵌入第三方视频以及本地视频。
直接上代码：

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

1.2：第二种就是我目前需求所需要的，可以在H5页面中嵌入第三方视频的方法。这里以优酷视频为例，首先在iframe的src中填写优酷视频引用链接，格式如下：http://player.youku.com/embed/XMzcwNTY3NTM2MA
绿色部分是优酷通用的引用链接（不用修改），红色部分填写你想嵌入视频的ID。（下方有获取优酷视频ID的教程）
获取优酷视频ID百度经验教程 https://jingyan.baidu.com/article/0320e2c1246e1b1b87507b85.html


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

    代码:

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

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

本文链接：https://blog.csdn.net/Kinber_XD/article/details/81631517