用SMIL语言编写一个简单的演示

时间:2023-03-09 19:50:12
用SMIL语言编写一个简单的演示

一、首先需要注意的几点是:

  1.用记事本编写代码时,要保存为后缀名为.smil或.smi的文件,并且编码格式选择为UTF-8。

  2.打开.smil文件的播放器选择为:RealPlayer或是AmbulantPlayer,它们的下载地址分别是

          RealPlayer:https://www.realnetworks.com/products-services/realmedia-hd-suite/realplayer-hd

AmbulantPlayer:http://www.ambulantplayer.org/Download200.shtml

  3.smil学习的网址可以是:http://www.w3school.com.cn/smil/index.asp 和 http://79343654.iteye.com/blog/1328448等等。

  4.编写好的代码在播放器播放的过程中可能会产生一些多余的代码,这些代码一般在</smil>前面,要注意检查。

  5.在测试效果的过程中,不要频繁关闭RealPlayer,关闭多次它就打不开了,只能重启电脑才能重新打开(也许是我电脑的问题)。

二、代码

  基础知识在上面的学习网址之中都有,SMIL和HTML很相似,很好学习,所以我就直接上代码了。(所有要用的多媒体素材都保存在一个materials的文件中)

<smil>

<head>

   <layout>

     <root-layout width="1280"  height="720" background-color="white"/>

<region id="video_one" left="4" top="4" width="960" height="540" fit="meet" z-index="5"/>

      <region id="image_one" left="968" top="4" width="308" height="177" fit="meet"/>

<region id="image_two" left="968" top="185" width="308" height="177" fit="meet"/>

<region id="image_three" left="968" top="365" width="308" height="177" fit="meet"/>

<region id="text_one" left="4" top="547" width="1272" height="720" fit="meet"/>

        <region id="image_four" left="0" width="600" height="400" fit="meet"/>

   </layout>

</head>

<body>

  <par>

      <video src="materials/Sakamoto.rmvb" region="video_one" begin="0" dur="35" fill="freeze"/>

     <img src="materials/b.png" region="image_one" begin="36" end="56" fill="freeze"/>

      <audio src="materials/music1.mp3"  begin="35" end="56" />

       <img src="materials/c.png" region="image_two" begin="56" end="76"  fill="freeze"/>

<audio src="materials/music2.mp3"  begin="56" end="76"/>

      <img src="materials/d.png" region="image_three" begin="77" end="97"  fill="freeze"/>

<audio src="materials/music3.mp3"  begin="77" end="97"/>

<text src="materials/text1.txt" region="text_one" begin="0" end="35"/>

<text src="materials/text2.txt" region="text_one" begin="36" end="56"/>

<text src="materials/text3.txt" region="text_one" begin="56" end="76"/>

<text src="materials/text4.txt" region="text_one" begin="77" end="97"/>

  </par>

</body>

</smil>

以上代码实现的功能为:1.播放视频并显示说明文字。

用SMIL语言编写一个简单的演示

           2.播放音乐,并同时显示与音乐对应的文字和图片。(画面中最大的那幅图是视频结束后定格的一帧)

用SMIL语言编写一个简单的演示

用SMIL语言编写一个简单的演示

用SMIL语言编写一个简单的演示

<smil xmlns="http://www.w3.org/2001/SMIL20/Language">

<head>

   <layout>

    <root-layout width="1280"  height="720" background-color="white"/>

      <region id="image_four" left="0" top="272" width="308" height="177" fit="meet"/>

   </layout>

<transition id="fade1" type="fade" subtype="fadeToColor" dur="4s"/>  <transition id="fade2" type="fade" subtype="fadeFromColor" dur="4s"/>

<transition id="wipe1" type="slideWipe" subtype="fromTop" dur="4s"/>  <transition id="wipe2" type="waterfallWipe"  dur="4s"/>

</head>

<body>

    <seq>

     <img region="image_four" src="materials/a.png" dur="30">

      <animateMotion from="0 272" to="972 272" dur="30"/>

</img>

<img region="image_five" src="materials/e.png" width="1280" height="720">

<animate attributeName="height" from="360" to="720" fill="freeze" dur=10s"/>

</img>

<img src="materials/one.jpg"  tansIn="fade2" transOut="fade1" dur="15s"/>

<img src="materials/two.jpg"  tansIn="wipe1" transOut="wipe2" dur="15s"/>

</seq>

</body>

</smil>

  这段代码本来应该正常的展示出图片的移动,放大,淡入淡出和擦除的效果,但由于我的RealPlayer打开几次文件后就无法继续打开文件,我只能关掉RealPlayer,而这导致我只能不断地开关机,然而我的电脑开关机的速度都极其的慢,我在上面耗费了许多时间也始终没能把该.smil文件打开。加上接下来的一周我还得完成流媒体服务器的搭建,弄一个多媒体播放器,做一个音/视频编解码器(当然在这么短的时间内完成这些肯定要去借鉴别人的代码),总之,SMIL学习先暂时结束。