Video標籤事件與屬性

時間  2019-11-29
標籤 video 標籤 事件 屬性 简体版
原文   原文鏈接

事件與屬性javascript

屬性    描述
audioTracks    返回可用的音軌列表（MultipleTrackList對象）
autoplay    媒體加載後自動播放
buffered    返回緩衝部件的時間範圍(TimeRanges對象)
controller    返回當前的媒體控制器（MediaController對象）
controls    顯示播控控件
crossOrigin    CORS設置
currentSrc    返回當前媒體的URL
currentTime    當前播放的時間，單位秒
defaultMuted    缺省是否靜音
defaultPlaybackRate    播控的缺省倍速
duration    返回媒體的播放總時長，單位秒
ended    返回當前播放是否結束標誌
error    返回當前播放的錯誤狀態
initialTime    返回初始播放的位置
loop    是否循環播放
mediaGroup    當前音視頻所屬媒體組 (用來連接多個音視頻標籤)
muted    是否靜音
networkState    返回當前網絡狀態
paused    是否暫停
playbackRate    播放的倍速
played    當前播放部件已經播放的時間範圍(TimeRanges對象)
preload    頁面加載時是否同時加載音視頻
readyState    返回當前的準備狀態
seekable    返回當前可跳轉部件的時間範圍(TimeRanges對象)
seeking    返回用戶是否作了跳轉操做
src    當前音視頻源的URL
startOffsetTime    返回當前的時間偏移(Date對象)
textTracks    返回可用的文本軌跡(TextTrackList對象)
videoTracks    返回可用的視頻軌跡(VideoTrackList對象)
volume    音量值
屬性

 

事件    描述
abort    當音視頻加載被異常終止時產生該事件
canplay    當瀏覽器能夠開始播放該音視頻時產生該事件
canplaythrough    當瀏覽器能夠開始播放該音視頻到結束而無需因緩衝而中止時產生該事件
durationchange    當媒體的總時長改變時產生該事件
emptied    當前播放列表爲空時產生該事件
ended    當前播放列表結束時產生該事件
error    當加載媒體發生錯誤時產生該事件
loadeddata    當加載媒體數據時產生該事件
loadedmetadata    當收到總時長，分辨率和字軌等metadata時產生該事件
loadstart    當開始查找媒體數據時產生該事件
pause    當媒體暫停時產生該事件
play    當媒體播放時產生該事件
playing    當媒體從因緩衝而引發的暫停和中止恢復到播放時產生該事件
progress    當獲取到媒體數據時產生該事件
ratechange    當播放倍數改變時產生該事件
seeked    當用戶完成跳轉時產生該事件
seeking    當用戶正執行跳轉時操做的時候產生該事件
stalled    當試圖獲取媒體數據，但數據還不可用時產生該事件
suspend    當獲取不到數據時產生該事件
timeupdate    當前播放位置發生改變時產生該事件
volumechange    當前音量發生改變時產生該事件
waiting    當視頻因緩衝下一幀而中止時產生該事件
事件

轉：https://blog.csdn.net/Take_Dream_as_Horse/article/details/53422397css

video的暫停、播放事件，並切換清晰度html

（1）暫停的時候顯示廣告圖片（圖片有跳轉連接）java

（2）切換清晰度後，視頻按切換前播放時間繼續自動播放（或者暫停播放）jquery

注:最好在沒個video標籤外定義一個div盒子，這樣便於定位廣告圖片的位置或者自定義的操做按鈕的位置git

    同時說明一下 video經常使用屬性：controls:是否顯示控制按鈕 autoplay：是否加載完成自動播放github

htmlweb

<span style="color:#ff0000;">   </span><div class="video">  
        <video id="media"  controls="controls"   width="600" height="400">  
            <source src="video/video.mp4" type="video/mp4" />  
            您的瀏覽器版本過低,請及時更新  
        </video>  
        <a href="http://www.baidu.com" target="_blank" class="skip"></a>  
         <!-- 切換清晰度 -->  
        <a class="toggle-btn">切換至240p</a>  
    </div>
View Code

jsajax

$('.skip').hide();  
var myVideo=document.getElementById("media");  
myVideo.addEventListener('play',function(){  
    $('.skip').hide();     
});  
myVideo.addEventListener('pause',function(){  
    $('.skip').show();  
})  
  
////切換清晰度  
      function toggleVideo(e){  
        //當前播放時間  
        var curTime=e.currentTime;  
        $("#media").attr("src","video/exo.mp4").attr("autoplay","true");  
        e.currentTime=curTime  
      }  
  
      $('.toggle-btn').click(function(){  
        toggleVideo(myVideo);  
      })
View Code

注：這裏有幾點須要注意：json

（1）myvideo是原生DOM對象，因此綁定事件爲addEventListener()方法

 （2）play爲播放事件、pause爲暫停事件

（3）curTime爲切換清晰度時視頻已經播放的時間

demo地址：https://github.com/chuanzaizai/h5-video-demo

低版本瀏覽器不支持的需另外處理

<object classid="clsid:22d6f312-b0f6-11d0-94ab-0080c74c7e95" id="mediaplayer" width="700" height="350"> 
　　<embed> 
　　　　<param name="SRC" value="Lavigne.mp4"> 
　　</embed> 
</object> 

<body>
    <video id="media" src="什麼叫跨域.mp4" poster="bg1.jpg" controls width="800px" heigt="800px">
        這裏是註釋文字，若是沒法支持 HTML 5 瀏覽器將顯示這裏的文字。若是支持，就直接顯示視頻，忽略文字。
    </video>
</body>
</html>
經過上面的截圖能夠看到每一個格式的視頻，瀏覽器支持的各不同，因此爲了考慮 到兼容性咱們須要使用不一樣格式的視頻，這個時候就可使用source標籤來指定不一樣的 視頻格式：

<video width="320" height="240" controls="controls">
 <source src="movie.ogg" type="video/ogg">

 <source src="movie.mp4" type="video/mp4">

Your browser does not support the video tag.

</video>
咱們 知道video不兼容低版本的瀏覽器，因此爲了兼容低版本的瀏覽器，咱們還須要 使用flash的 播放方式：
 <video id="media" src="什麼叫跨域.mp4" poster="bg1.jpg" controls width="800px" heigt="800px">
        <!-- 兼容 Firefox -->
        <source src="movie.ogg" type="video/ogg" />
        <!-- 兼容 Safari/Chrome-->
        <source src="什麼叫跨域.mp4" type="video/mp4" />
        <!-- 若是瀏覽器不支持video標籤，則使用flash -->
        <embed src=" movie.swf" type="application/x-shockwave-flash" width="320" height="240" allowscriptaccess="always" allowfullscreen="true">
        </embed>
    </video>
View Code

 

本身寫的一個限制視頻播放次數

<head>
    <meta charset="utf-8" />
    <title>視頻播放次數</title>

    <script src="Scripts/jquery-1.10.2.min.js"></script>
    <script src="Js/Common.js"></script>
    <style type="text/css">
        .video {
            width: 100%;
            height: 100%;
            position:absolute;
            margin:5px auto;
        }
    </style>
</head>
<body>
    <div class="video">
        <video id="videoyoudai" controls="controls" class="video">
            <!--<source src="" type="video/mp4" />-->
            Your browser does not support the video tag.
        </video>
    </div>
</body>
</html>

<script type="text/javascript">
    //var webapiUrl = "http://地址:8081/api/";

    //function GetQueryString(name) {
    //    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
    //    var r = window.location.search.substr(1).match(reg);
    //    if (r != null) return unescape(r[2]); return null;
    //}



    $(function () {
        var contractCode = GetQueryString("contractCode");
        if (contractCode == null || contractCode=="") {
            alert("合同編號不能爲空;");
        }
        var data = { contractCode: contractCode };
        $.ajax({
            type: "get",
            url: webapiUrl + "/controller/action",
            data: data,
            success: function (data) {
                if (data.ErrCode == 0) {
                    var contractInfo = data.Data;
                    if (null == contractInfo) {
                        alert("視頻不存在;");
                        return;
                    }
                    var num = contractInfo.PlayNum + 1;
                    if (num > 3) {
                        alert("最多隻能播放3次;");
                        return;
                    }
                    else {
                        alert("能夠播放3次，第" + num + "次播放;");
                        $("#videoyoudai").prop("src", contractInfo.VideoUrl);
                    }
                    var yvideo = document.getElementById("videoyoudai");
                    yvideo.addEventListener("play", function () { PlayNum(num) });
                    console.log(contractInfo.VideoUrl);
                }
                else {
                    alert(data.ResultMsg);
                }
            },
            error: function (json) {
                var data = eval(json);
                if (data != "") {
                    alert(data.ResultMsg);
                }
                else {
                    alert("服務器錯誤");
                }
            }
        })

        function PlayNum(num) {
            var sessionStore = window.sessionStorage.getItem(contractCode);
            if (sessionStore == null) {
                window.sessionStorage.setItem(contractCode, contractCode);
                var data = { type: "youdai", Name: "優貸", Code: contractCode, playNum: num };
                $.ajax({
                    type: "post",
                    url: webapiUrl + "/LoanVideoPlay/AddOrUpdateLoanVideoPlay",
                    data: data,
                    success: function (data) {
                        if (data.ErrCode == 0) {

                        }
                        else {
                            alert(data.ResultMsg);
                        }
                    },
                    error: function (json) {
                        var data = eval(json);
                        if (data != "") {
                            alert(data.ResultMsg);
                        }
                        else {
                            alert("服務器錯誤");
                        }
                    }
                })

            }

        }

    });

    

</script>
View Code
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程