Video視頻標籤

時間 2020-08-25

標籤 video 視頻標籤简体版

原文原文鏈接

1 視頻播放video標籤；javascript

<!-- 1 src 視頻路徑 -->
<!-- 2 width寬度 -->
<!-- 3 height高度 -->
<!-- 4 controls 視頻控件 -->
<video src="https://www.w3school.com.cn/i/movie.ogg" width="500px" height="300px" controls="controls">
<!-- video標籤之間插入的內容是供不支持video元素的瀏覽器顯示的-->
　　Your browser does not support the video tag.
</video>

2 視頻播放video + source標籤css

video 元素容許多個 source 元素。source 元素能夠連接不一樣的視頻文件。瀏覽器將使用第一個可識別的格式,但1個video標籤只能播放一個視頻html

<video width="320" height="240" controls="controls">
      <source src="https://www.w3school.com.cn/i/movie.ogg" type="video/ogg">
      <source src="https://www.w3school.com.cn/i/movie.mp4" type="video/mp4">
      Your browser does not support the video tag.
</video>

3 視頻在就緒後立刻播放autoplayjava

高版本瀏覽器，對視頻靜音後，能夠保證視頻自動播放,因此在使用autoplay="autoplay"樣式時,必須添加muted="muted" 其規定視頻輸出應該被靜音瀏覽器

　　<video width="320" height="240" controls="controls" muted="muted" autoplay="autoplay">
          <source src="https://www.w3school.com.cn/i/movie.ogg" type="video/ogg">
          <source src="https://www.w3school.com.cn/i/movie.mp4" type="video/mp4">
          Your browser does not support the video tag.
    </video>

4 媒介文件完成播放後再次開始播放loop網絡

<video width="320" height="240" controls="controls" muted="muted" autoplay="autoplay" loop="loop">
          <source src="https://www.w3school.com.cn/i/movie.ogg" type="video/ogg">
          <source src="https://www.w3school.com.cn/i/movie.mp4" type="video/mp4">
          Your browser does not support the video tag.
    </video>

5 經過JS實現自定義控件ide

　　　　 <video id="vid" src="https://stream7.iqilu.com/10339/upload_transcode/202002/09/20200209104902N3v5Vpxuvb.mp4" controls="controls"></video>
        
        <button id="start">開始</button>
        <button id="pause">暫停</button>
        <button id="restart">從新開始</button>

        <select name="" id="speed">
            <option value="0.1">10倍慢放</option>
            <option value="0.5">5倍慢放</option>
            <option value="1" selected>正常</option>
            <option value="1.5">快速</option>
            <option value="2">超快速</option>
        </select>

        <script type="text/javascript">
            //播放視頻
            start.onclick = function() {
                vid.play();
            }
            //暫停視頻
            pause.onclick = function() {
                vid.pause();
            }
            //從新播放
            restart.onclick = function() {
                vid.currentTime = 0;
                //vid.play();
            }
            //監聽視頻元數據加載完畢事件
            vid.onloadedmetadata = function() {
                //彈出視頻的總時長
                console.log(this.duration);
            }
            //改變視頻的播放速度
            speed.onchange = function() {
                vid.playbackRate = this.value;
            }
        </script>

6 經過JS實現自定義紅色進度條oop

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            video {
                width: 500px;
            }
            #big {
                width: 500px;
                height: 5px;
                background: #dedede;
            }
            #small {
                width: 0;
                height: 5px;
                background: red;
            }
        </style>
    </head>
    <body>

        <video id="vid" src="https://stream7.iqilu.com/10339/upload_transcode/202002/09/20200209104902N3v5Vpxuvb.mp4" controls="controls"></video>

        <div id="big">
            <div id="small"></div>
        </div>    
        <script type="text/javascript">
            //監聽播放速度,改變紅色進度條的長度
            vid.ontimeupdate = function() {
                //監聽當時的播放事件
                var currentTime = this.currentTime;
                //當前視頻的總時長
                var duration = this.duration;
                //改變紅色條的寬度
                small.style.width = currentTime / duration * 100 + "%";
                //small.style.width  = currentTime / duration * 500 + "px";
            }
            //點擊紅色進度條,改變播放進度
            big.onclick = function(e) {
                //距離左邊框的距離
                var x = e.clientX;
                //big標籤距離左邊框的距離
                var ol = this.offsetLeft;
                //紅色進度條的寬度
                var distance = x - ol;
                vid.currentTime = distance / 500 * vid.duration;
            }
        </script>
    </body>
</html>

7 小視頻測試URL 測試

如下視頻皆收集於網絡。

2020年2月18日更新，新冠肺炎疫情相關視頻：武漢加油中國加油

https://stream7.iqilu.com/10339/upload_transcode/202002/18/20200218114723HDu3hhxqIT.mp4
https://stream7.iqilu.com/10339/upload_transcode/202002/18/20200218093206z8V1JuPlpe.mp4
https://stream7.iqilu.com/10339/article/202002/18/2fca1c77730e54c7b500573c2437003f.mp4
https://stream7.iqilu.com/10339/upload_transcode/202002/18/20200218025702PSiVKDB5ap.mp4
https://stream7.iqilu.com/10339/upload_transcode/202002/18/202002181038474liyNnnSzz.mp4
https://stream7.iqilu.com/10339/article/202002/18/02319a81c80afed90d9a2b9dc47f85b9.mp4
http://stream4.iqilu.com/ksd/video/2020/02/17/c5e02420426d58521a8783e754e9f4e6.mp4
http://stream4.iqilu.com/ksd/video/2020/02/17/87d03387a05a0e8aa87370fb4c903133.mp4
https://stream7.iqilu.com/10339/article/202002/17/c292033ef110de9f42d7d539fe0423cf.mp4
http://stream4.iqilu.com/ksd/video/2020/02/17/97e3c56e283a10546f22204963086f65.mp4
https://stream7.iqilu.com/10339/article/202002/17/778c5884fa97f460dac8d90493c451de.mp4
https://stream7.iqilu.com/10339/upload_transcode/202002/17/20200217021133Eggh6zdlAO.mp4
https://stream7.iqilu.com/10339/article/202002/17/4417a27b1a656f4779eaa005ecd1a1a0.mp4
https://stream7.iqilu.com/10339/upload_transcode/202002/17/20200217104524H4D6lmByOe.mp4
https://stream7.iqilu.com/10339/upload_transcode/202002/17/20200217101826WjyFCbUXQ2.mp4
http://stream.iqilu.com/vod_bag_2016//2020/02/16/903BE158056C44fcA9524B118A5BF230/903BE158056C44fcA9524B118A5BF230_H264_mp4_500K.mp4
https://stream7.iqilu.com/10339/upload_transcode/202002/16/20200216050645YIMfjPq5Nw.mp4
https://stream7.iqilu.com/10339/article/202002/16/3be2e4ef4aa21bfe7493064a7415c34d.mp4
https://stream7.iqilu.com/10339/upload_transcode/202002/09/20200209105011F0zPoYzHry.mp4
https://stream7.iqilu.com/10339/upload_transcode/202002/09/20200209104902N3v5Vpxuvb.mp4
2019.09.28更新20條速度比較快的地址：        各類尺寸都有，主要是4：3和16：9的，本身區分下。

https://v-cdn.zjol.com.cn/280443.mp4
https://v-cdn.zjol.com.cn/276982.mp4
https://v-cdn.zjol.com.cn/276984.mp4
https://v-cdn.zjol.com.cn/276985.mp4
https://v-cdn.zjol.com.cn/276986.mp4
https://v-cdn.zjol.com.cn/276987.mp4
https://v-cdn.zjol.com.cn/276988.mp4
https://v-cdn.zjol.com.cn/276989.mp4
https://v-cdn.zjol.com.cn/276990.mp4
https://v-cdn.zjol.com.cn/276991.mp4
https://v-cdn.zjol.com.cn/276992.mp4
https://v-cdn.zjol.com.cn/276993.mp4
https://v-cdn.zjol.com.cn/276994.mp4
https://v-cdn.zjol.com.cn/276996.mp4
https://v-cdn.zjol.com.cn/276998.mp4
https://v-cdn.zjol.com.cn/277000.mp4
https://v-cdn.zjol.com.cn/277001.mp4
https://v-cdn.zjol.com.cn/277002.mp4
https://v-cdn.zjol.com.cn/277003.mp4
https://v-cdn.zjol.com.cn/277004.mp4

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。