HTML中插入視頻

本文轉載自查看原文 2016-11-23 19:57 14770

最常用的向HTML中插入視頻的方法有兩種，一種是古老的<object></object>標簽，一種是html5中的<video></video>標簽。

前者的兼容性沒得說，但是使用起來不太方便，后者使用起來很方便，但是兼容性讓人頭疼。

雖然后者兼容性存在很多問題，但是因為使用很方便，符合未來網頁設計發展的趨勢，因此我們以后者為主要的插入視頻的方法，因為它兼容性的問題，前者作為輔助。

代碼如下:

<video width="602px" height="345px" controls="controls">
<source src="public/video/test.mp4" type="video/mp4"></source>
<source src="public/video/test.ogg" type="video/ogg"></source>
your browser does not support the video tag
</video>

當前，video 元素支持三種視頻格式：
格式 IE Firefox Opera Chrome Safari
Ogg No 3.5+ 10.5+ 5.0+ No
MPEG 4 9.0+ No No 5.0+ 3.0+
WebM No 4.0+ 10.6+ 6.0+ No

Ogg = 帶有 Theora 視頻編碼和 Vorbis 音頻編碼的 Ogg 文件

MPEG4 = 帶有 H.264 視頻編碼和 AAC 音頻編碼的 MPEG 4 文件

WebM = 帶有 VP8 視頻編碼和 Vorbis 音頻編碼的 WebM 文件

注：格式必須符合上面三條詳細要求，比如MPEG 4，必須是H.264視頻和AAC音頻。

在這種情況下，如果視頻格式正確，大部分瀏覽器的兼容性結果我們還算滿意，但是IE678不支持它，並且人家的用戶至今在中國還是十分龐大的群體，我們就必須想到另外一個解決方案支持它們：

代碼如下:

這里面引入了一些文件，除了flv格式的視頻，還有幾個swf或js文件，都是用DW軟件生成的，不想研究<object></object>標簽的朋友去DW軟件生成就行，如果可以巧妙的融合

這兩段代碼就可以得到兼容所有主流瀏覽器的終極代碼了。

於是我們可以這樣：

用jquery判斷瀏覽器是否為IE（不用判斷具體IE版本，因為服務器的原因IE很可能高版本也不通過，暫且IE全部用<object></object>標簽），根據版本加載不同的標簽，代碼如下：

代碼如下:

不要忘記在寫這段代碼之前引入jquery文件

一、視頻

1.對在線視頻的添加

在各大網站打開一個視頻，在下方的分享找到HTML代碼，然后復制HTML代碼到自己的代碼中。

2.添加本地視頻

autoplay為自動播放,loop為循環次數，引號內值為loop為無限循環，1為播放1次

<video  width="450" height="262" controls="controls"> 
<source src="image/2.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

 <video title="鋼鐵俠的變身視頻" id="video1" width="400" style="margin-top:5px;">
    <source src="image/1.mp4" />  
    Your browser does not support HTML5 video.
  </video> <br /> 
   <button onclick="playPause()">播放/暫停</button> 
  <button onclick="makeBig()">大</button>
  <button onclick="makeNormal()">中</button>
  <button onclick="makeSmall()">小</button>
<script>
var myVideo=document.getElementById("video1");

function playPause()
{ 
if (myVideo.paused) 
  myVideo.play(); 
else 
  myVideo.pause(); 
} 

function makeBig()
{ 
myVideo.width=450; 
} 

function makeSmall()
{ 
myVideo.width=350; 
} 
</script>

二、音頻

<audio controls="controls" autoplay="true" style="">
<source src="cw.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>

delay表示摧遲，引號內數字為秒數。

三字幕滾動

2.各參數詳解：
a)scrollAmount。它表示速度，值越大速度越快。如果沒有它，默認為6，建議設為1～3比較好。
b)width和height，表示滾動區域的大小，width是寬度，height是高度。特別是在做垂直滾動的時候，一定要設height的值。
c)direction。表示滾動的方向，默認為從右向左：←←←。可選的值有right、down、up。滾動方向分別為：right表示→→→，up 表示↑，down表示↓。
d)scrollDelay，這也是用來控制速度的，默認為90，值越大，速度越慢。通常scrollDelay是不需要設置的。
e)behavior。用它來控制屬性，默認為循環滾動，可選的值有alternate(交替滾動)、slide(幻燈片效果，指的是滾動一次，然后停止滾動)

此種字幕滾動也適用於圖片滾動

四、圖片輪換

<img id="obj"  src="three/c7.jpg"/>
<script language="javascript" type="text/javascript" >
var curIndex=0;
//時間間隔(單位毫秒)，每秒鍾顯示一張，數組共有5張圖片放在Photos文件夾下。
var timeInterval=1000;
var arr=new Array();
arr[0]="three/c7.jpg";
arr[1]="three/c6.jpg";
arr[2]="three/c8.jpg";
arr[3]="three/c9.jpg";
setInterval(changeImg,timeInterval);
function changeImg()
{
    var obj=document.getElementById("obj");
    if (curIndex==arr.length-1) 
    {
        curIndex=0;
    }
    else
    {
        curIndex+=1;
    }
    obj.src=arr[curIndex];
}

 </script>

2.js實現仿京東圖片輪播效果，當鼠標划在窗口上面停止計時器，鼠標離開窗口，開啟計時器，鼠標划在頁簽上面，停止計時器，手動切換

HTML部分

#flash{width: 687px;height: 400px;left:0px;position: relative;cursor: pointer;}
    #pic li{position: absolute;top: 0;left: 0;z-index: 1;display: none;}
    #num{position: absolute;left: 40%;bottom: 10px;z-index: 2;cursor:default;}
    #num li{float: left;width: 20px;height: 20px;border-radius: 50%;background: #666;margin: 3px;line-height: 20px;text-align: center;color: #fff;cursor: pointer;}
    #num li.active{background: #f00;}
    .arrow{height: 60px;width: 30px;line-height: 60px;text-align: center;display: block;position: absolute;top:45%;z-index: 3;display: none;}
    .arrow:hover{background: rgba(0,0,0,0.7);}
    #flash:hover .arrow{display: block;}
    #left{left: 2%;}
    #right{right: 2%;}

</style>

<div id="flash">
 <ul id="pic">
     <li style="display:block"><img  src="images/h5.bmp" alt="" ></li>
      <li><img src="images/h7.png" style="width:550px; height:360px" alt="" ></li>
      <li><img src="images/h6.jpg" alt="" ></li>
      <li><img src="images/h3.jpg" alt="" ></li>
      <li><img src="images/h1.jpg" alt="" ></li>
       <li><img src="images/h2.jpg" alt="" ></li>
        <li><img src="images/h4.jpg" alt="" ></li>
    </ul>
    <ol id="num">
      <li class="active"> 1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
    </ol>
    <a href="javascript:;" class="arrow" id="left"><</a>
    <a href="javascript:;" class="arrow" id="right">></a> 
    </div>

JavaScript部分

function $(id) {
      return typeof id==='string'?document.getElementById(id):id;
    }
    window.onload=function(){
      var index=0;
      var timer=null;
      var pic=$("pic").getElementsByTagName("li");
      var num=$("num").getElementsByTagName("li");
      var flash=$("flash");
      var left=$("left");
      var right=$("right");
      //單擊左箭頭
      left.onclick=function(){
        index--;
        if (index<0) {index=num.length-1};
        changeOption(index);
      }
      //單擊右箭頭
      right.onclick=function(){
        index++;
        if (index>=num.length) {index=0};
        changeOption(index);
      }      
      //鼠標划在窗口上面，停止計時器
      flash.onmouseover=function(){
        clearInterval(timer);
      }
      //鼠標離開窗口，開啟計時器
      flash.onmouseout=function(){
        timer=setInterval(run,2000)
      }
      //鼠標划在頁簽上面，停止計時器，手動切換
      for(var i=0;i<num.length;i++){
        num[i].id=i;
        num[i].onmouseover=function(){
          clearInterval(timer);
          changeOption(this.id);
        }
      }    
      //定義計時器
      timer=setInterval(run,2000)
      //封裝函數run
      function run(){
        index++;
        if (index>=num.length) {index=0};
        changeOption(index);
      }
      //封裝函數changeOption
      function changeOption(curindex){
        console.log(index)
        for(var j=0;j<num.length;j++){
          pic[j].style.display="none";
          num[j].className="";
        }
        pic[curindex].style.display="block";
        num[curindex].className="active";
        index=curindex;
      }
    }

五

實現兩個圖層，平時第二個圖層隱藏，鼠標觸碰時第二個圖層出現，另一個隱藏；鼠標離開恢復原樣

1.有且只有一個這種圖層

<style>
#aa
{
width:100px;
height:100px;
left:50px;
top:50px;
background-color:#0FF;
position:absolute;
}
#a
{
    width:100px;
height:100px;
background-color: #F90;
visibility:hidden;
position:absolute;
}
</style>
</head>

<body>
<div id="aa" onmouseover="over()" onmouseout="out()"><div id="a"> </div></div>
<script>
function over()
{
    var aa =document.getElementById("a");
    aa.style.visibility="visible";
    }
    function out()
{
    var aa =document.getElementById("a");
    aa.style.visibility="hidden";
    }
</script>
</body>
</html>

2.有多個一樣的圖層

<style>
#a
{
    width:100%;
    height:415px;
    border:1px solid red;
    position:relative;}
.aa
{
    width:20%;
    height:200px;
    margin-left:4%;
    float:left;
    margin-top:5px;
    background-color:#0F6;
    position:relative;}
.b
{
    width:100%;
    height:200px;
    position:relative;
    background-color:#000;
    opacity:0.4;
    visibility:hidden;}
#w
{
    position:relative;
    top:-180px;
    visibility:hidden;
    }
</style>
</head>

<body>
<div id="a">
<div class="aa"><div class="b"></div></div>
<div class="aa"><div class="b"></div></div>
<div class="aa"><div class="b"></div></div>
<div class="aa"><div class="b"></div></div>
<div class="aa"><div class="b"></div></div>
<div class="aa"><div class="b"></div></div>
<div class="aa"><div class="b"></div></div>
<div class="aa"><div class="b"></div></div>
</div>
</body>
</html>
<script>
var all=document.getElementsByClassName("aa");
for(var i=0;i<all.length;i++)
{
    all[i].onmouseover=function(){this.firstChild.style.visibility="visible"}
    all[i].onmouseout=function(){this.firstChild.style.visibility="hidden"}
}

</script>

免責聲明！

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

猜您在找 如何在html中插入視頻 html插入視頻【轉】HTML網頁中插入視頻各種方法向HTML中插入視頻有兩種方法向HTML中插入視頻並兼容所有瀏覽器的方法網頁中插入視頻網頁中插入視頻的方案 Markdown中如何插入視頻 > iframe？創建節點並插入HTML中