用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.播放視頻並顯示說明文字。

 

           2.播放音樂,並同時顯示與音樂對應的文字和圖片。(畫面中最大的那幅圖是視頻結束后定格的一幀)

<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學習先暫時結束。

 

       

      


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM