如何在网站中嵌入视频播放器 [复制链接] [手机版]

通常我们要在自己做的网站上放视频方法就是将自己的视频先上传到优酷，土豆等一些大的视频网站，然后再将优酷，土豆上的视频通过分享代码嵌入自己的网站上。（相关教程：如何给网页添加视频动画）

如何在网站中嵌入视频播放器

这种方法可以节省网站空间，但是这些视频上面有大量的优酷广告，特别长的时间达到60秒，用户体验不是很好。利用去除优酷广告的方法也很难走效。

那么如何上自己网站中嵌入视频播放器，直接播放自己的视频呢？

方法/步骤
1、转换自己的视频格式为MP4格式；

一般AVI格式的视频是很大的，所以我们第一步要做的是把视频格式进行转换，以便节约空间资源和更快的打开视频，转换视频格式我们经常会用到一个软件——格式工厂，这个软件是免费的，你可以通过互联网进行下载，你也可以在帖子特别底部找到软件的下载地址，通过此软件AVI等视频转换为网页视频格式MP4等。

2、上传转换后的视频至自己网站空间中，（一般可以在自己空间根目录下新建一个文件夹video，用于存放视频）；

3、上传完成后，可以通过以下代码直接在文章编辑（文本编辑模式）中插入调用代码即可；

<iframe src="视频地址" frameborder="0" allowfullscreen="" width="600" height="400"></iframe>
4、提示：虚拟主机由于流量限制，不会支持很多视频的播放。建议使用服务器或者将视频上传到大视频网站，然后引用。

iframe代码似乎有安全隐患，本论坛好像已经禁用了，有时间了研究下。文章内容目前只是参考资源。

家园论坛测试通过，使用[iframe][/iframe]代码，东芝笔记本。

require/bbscode.php
//iframe开启的情况
function setIframe($path, $width, $height){
    $path = escapeUrl($path);
    !$width && $width = "97%";
    !$height && $height = "340";
    if($path) {
        return "<IFRAME SRC=".$path." FRAMEBORDER=0 ALLOWTRANSPARENCY=true SCROLLING=YES WIDTH=".$width." HEIGHT=".$height."></IFRAME>";
    }else{
        return "";
    }
}

今天两个笔记本联合表演。
东芝在东屋调试（故障应该是背光有问题，外接显示器使用。都好长时间没有通电了，今天休班拿出来通通电），联想在西屋测试修改后的结果。目前楼上是《老婆最大》音乐，mp3可以自动播放。flv视频似乎不能解析，但mp4的正常（这个似乎也是自动播放）。如果测试可行，以后还要把保存在论坛空间的flv视频再转换为mp4格式。当初应该测试比较过视频大小的，所以有的视频是选择为flv格式的。或者重要的一点是，flv视频可以通过flvlist标签在一个播放器里多集集中在一起，可以选择播放。这个还是比较不错的，可惜的是大概还是和flash有关，有的时候不能用啊。
——原帖联想发表，东芝再编辑补充。

键盘和鼠标在东屋（东芝开机时需要按F1设置时间和日期，但自带键盘不知道为何当时不能用，只能外接键盘），联想自带的键盘打字感觉还是不太习惯。 准备把3楼的代码添加为自定义代码试试，这样就可以定义宽度和高度了。走，去东屋！

测试可以播放mp3和mp4，但flv的是直接下载，不知为何。

iframe vs video
在 html 中嵌入视频可以使用 iframe 或 video 标签两种方式。

两者的区别包括：

　　　　　　iframe    video
兼容性问题    浏览器支持    依赖浏览器
视频下载速度    较快    较慢
视频元素的控制程度    支持度差（样式和接口）    支持度高（样式和接口）

问题
项目中使用 iframe 访问视频网址，但是有个问题，就是视频会自动播放，网上找了很多方法加 allow 属性，在 url 中 autoplay=false，折腾了半天，都不起作用。

<iframe class="video-frame" src="http//...."></iframe>

解决方法
方法1：使用 sandbox 属性，在 iframe 标签加上 sandbox 属性后，魔法般地解决了问题。
<iframe class="video-frame" src="http//...." sandbox=""></iframe>

方法2：将 iframe 替换为 video 标签
sandbox 属性
HTML 5 通过 sandbox 属性提升 iFrame 的安全性。sandbox 属性可以防止不信任的Web页面执行某些操作。其好处包括：

访问父页面的DOM（从技术角度来说，这是因为相对于父页面 iframe 已经成为不同的源了）
执行脚本
通过脚本嵌入自己的表单或是操纵表单
对cookie、本地存储或本地SQL数据库的读写