zoukankan      html  css  js  c++  java
  • 在HTML中使用object和embed标签插入视频

    object标签和embed标签都能给页面添加多媒体内容:

    一、object

    对于object,w3c上定义object为一个嵌入的对象。可以使用此元素向您的 XHTML 页面添加多媒体。此元素允许您规定插入 HTML 文档中的对象的数据和参数,以及可用来显示和操作数据的代码。

    <object> 标签用于包含对象,比如图像、音频、视频、Java applets、ActiveX、PDF 以及 Flash。object 的初衷是取代 img 和 applet 元素。不过由于漏洞以及缺乏浏览器支持,这一点并未实现。浏览器的对象支持有赖于对象类型。不幸的是,主流浏览器都使用不同的代码来加载相同的对象类型。而幸运的是,object 对象提供了解决方案。如果未显示 object 元素,就会执行位于 <object> 和 </object> 之间的代码。通过这种方式,我们能够嵌套多个 object 元素(每个对应一个浏览器)

    二.object与embed

    我们要在网页中正常显示flash内容,那么页面中必须要有指定flash路径的标签。也就是object和embed标签。
    object标签是用于windows平台的IE浏览器的,

    embed是用于windows和Macintosh平台下的Netscape Navigator浏览器以及Macintosh平台下的IE浏览器。

    备注: windows平台的IE利用Activex控件来播放flash而其它的浏览器则使用Netscape插件技术来播放flash。

    三、<object>和<embed>标签的区别:

    两者都是用来播放多媒体文件的对象,object元素用于IE浏览器,embed元素用于非IE浏览器,为了保证兼容性,通常我们同时使用两个元素,浏览器会自动忽略它不支持的标签。同时使用两个元素时,应该把<embed>标签放在<object>标签的内部。

    接下来是代码展示:

    <!<-- 直接到腾讯视频分享下面复制html代码过来,里面的.swf就是视频文件了-->
    	<object id="player" width="684" height="450">
    		<param name="movie" value="https://imgcache.qq.com/tencentvideo_v1/playerv3/TPout.swf?max_age=86400&v=20161117&vid=g0023l48fzl&auto=0">
    		<param name="allowFullScreen" value="true">
    		<param name="allowscriptaccess" value="always">
    		<param name="wmode" value="Transparent">
    		<embed src="https://imgcache.qq.com/tencentvideo_v1/playerv3/TPout.swf?max_age=86400&v=20161117&vid=g0023l48fzl&auto=0" allowFullScreen="true" quality="high" width="480" height="400" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed>
    	</object>
    

     页面出来效果:IE也可以兼容哦!

     

     非IE移动端 可以只用embed标签引入

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<meta name="viewport" content="width=device-width, initial-scale=1.0"><!--移动端必须加这代码-->
    	<title>	</title>
    	<style>
    		*{margin:0;padding:0;}
    		a.weui-media-box {
    		    color: #000;
    		    -webkit-tap-highlight-color: rgba(0,0,0,0);
    		}
    		.weui-media-box {
    		    padding: 15px;
    		    position: relative;
    		}
    		.content-title-two {
    		    display: block;
    		     100%;
    		    padding: 3.59375vw 3.90625vw;
    		    box-sizing: border-box;
    		    background: #fff;
    		    border-bottom: 1px solid #efefef;
    		}
    		.weui-media-box {
    		    float: left;
    		    padding: 10px 15px !important;
    		     100%;
    		    box-sizing: border-box;
    		}
    		.content-title-two .content-title-video {
    		     100%;
    		    margin-bottom: 2.03125vw;
    		}
    		.content-title-two .content-title-p {
    		    font-size: 2.8125vw;
    		    color: #939393;
    		}
    	</style>
    </head>
    <body>
    	<!-- 非IE移动端 可以只用embed标签引入-->
    	<a href="/video/" class="weui-media-box content-title-two">
    	    <h4 class="content-title-h4">[视频] 感动!一声呼喊 十几人合力抬车救出车轮下的男</h4>
    	    <div class="content-title-video">
    	        <embed style=" 300px" src="https://v.qq.com/iframe/player.html?vid=l0511aua3fd&tiny=0&auto=0">
    	    </div>
    	  	<p class="content-title-p">2017-06-07 00:00:00</p>
    	</a>
    </body>
    </html>
    

      

      

  • 相关阅读:
    模拟google分页效果
    真理胜于一切 JAVA模拟表单提交
    springboot @vaule注解失效解决办法
    安装cnpm
    公众号微信支付开发
    vue去掉链接中的#
    springboot集成mongoDB简易使用
    Spring boot中使用aop详解
    Promise 的基础用法
    MySQL的if,case语句使用总结
  • 原文地址:https://www.cnblogs.com/mmzuo-798/p/6957287.html
Copyright © 2011-2022 走看看