网页中加入视频的几种方法（PC与手机网页通用）
ecshop模板堂(ecmoban.com) | 2015-04-20 11:40 | 5836
网页中加入视频的几种方法（PC与手机网页通用）
方法一：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<!doctype html><html><head><meta charset="utf-8"><title>网页视频测试</title></head><body><div align="center"><embed src="http://player.youku.com/player.php/Type/Folder/Fid/22127316/Ob/1/sid/XNjk1MDUyNzU2/v.swf"quality="high" width="500" height="440" align="center" allowScriptAccess="always" allowFullScreen="true" mode="transparent" type="application/x-shockwave-flash"></embed></div></body></html> |
方法二（通用代码适用于手机页面播放 推荐）：
<iframe src="http://localhost/2012/mayday2012.mp4" scrolling="no" allowfullscreen="" frameborder="0" height="418" width="675"></iframe>
例如优酷视频
<iframe height=498 width=510 src="http://player.youku.com/embed/XOTA1OTA2NjAw" frameborder=0 allowfullscreen></iframe>
获取方法 复制通用代码
腾讯视频
<iframe frameborder=0 src="http://v.qq.com/iframe/player.html?vid=l01480qc099&tiny=0&auto=0" allowfullscreen></iframe>
获取方法 复制通用代码
粘贴到网页文件当中，如果想自适应手机屏 可写css样式 style="width:100%;height:auto;"
方法三：html5
由于旧的浏览器和Internet Explorer不支持<video>元素，考虑到兼容性，我们必须为这些浏览器找到一个支持Flash文件的解决方案。不幸的是，和HTML 5音频一样，涉及到视频的文件格式，Firefox 和 Safari/Chrome 的支持方式并不相同。因此，如果你想在这个时候使用HTML 5视频，则需要创建三个视频版本。
|
1
2
3
4
5
6
7
8
9
10
|
<video controls="controls" preload="auto" height="500" width="700"> <!-- Firefox --> <source src="mv.ogg" type="video/ogg" /> <!-- Safari/Chrome--> <source src="mv.mp4" type="video/mp4" /> <!-- 如果浏览器不支持video标签，则使用flash --> <embed src="mv.mp4" type="application/x-shockwave-flash" width="1024" height="798" allowscriptaccess="always" allowfullscreen="true"> </embed> </video> |
浙公网安备 33010602011771号