html5如何实现自动播放视频

html5如何实现自动播放视频,第1张

HTML5是下一代的HTML,提供了展示视频的标准,规定了一种通过video元素来包含视频的标准方法。

Video有以下的属性

autoplay  autoplay  如果出现该属性,则视频在就绪后马上播放。

controls  controls  如果出现该属性,则向用户显示控件,比如播放按钮。

height    pixels  设置视频播放器的高度。

loop     loop  如果出现该属性,则当媒介文件完成播放后再次开始播放。

preload   preload  如果出现该属性,则视频在页面加载时进行加载,并预备播放。

如果使用"autoplay",则忽略该属性。

src       url  要播放的视频的URL。

width     pixels  设置视频播放器的宽度。

<!DOCTYPE html>

<html lang="zh-cn">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>vlc-video视频播放</title>

    <link rel="stylesheet" href="./css/common.css">

    <link rel="stylesheet" href="./js/layui/css/layui.css">

</head>

<body>

    <!-- BTN -->

    <div>

        <button class="layui-btn" onclick="playVideo_1(),playVideo_2()">播放</button>

        <button class="layui-btn" onclick="zanting_1(),zanting_2()">暂停</button>

        <button class="layui-btn" onclick="kuaijin_1(),kuaijin_2()">快进10秒</button>

        <button class="layui-btn" onclick="kuaitui_1(),kuaitui_2()">快退10秒</button>

    </div>

    <!-- vlc播放器 -->

    <div id="vlc-content_1" class="content">

        <embed id="vlcObj_1" src="123.mp4" type="application/x-vlc-plugin" pluginspage="http://www.videolan.org" width="100%" height="480" />

    </div>

    <!-- h5 video播放器 -->

    <div id="video-contnt_1" style="display: none">

        <video id="video_1" src="123.mp4" controls width="100%" height="480">

            您的浏览器版本太旧,请更新版本或使用其他浏览器

        </video>

    </div>

    <!-- BTN_1 -->

    <div>

        <button class="layui-btn" onclick="playVideo_1()">播放1</button>

        <button class="layui-btn" onclick="zanting_1()">暂停1</button>

        <button class="layui-btn" onclick="kuaijin_1()">快进10秒</button>

        <button class="layui-btn" onclick="kuaitui_1()">快退10秒</button>

    </div>

<!-- vlc播放器 -->

    <div id="vlc-content_2" class="content">

        <embed id="vlcObj_2" src="456.mp4" type="application/x-vlc-plugin" pluginspage="http://www.videolan.org" width="100%" height="480" />

    </div>

    <!-- h5 video播放器 -->

    <div id="video-contnt_2" style="display: none">

        <video id="video_2" src="456.mp4" controls width="100%" height="480">

            您的浏览器版本太旧,请更新版本或使用其他浏览器

        </video>

    </div>

<!-- BTN_2 -->

<div>

        <button class="layui-btn" onclick="playVideo_2()">播放2</button>

        <button class="layui-btn" onclick="zanting_2()">暂停2</button>

        <button class="layui-btn" onclick="kuaijin_2()">快进10秒</button>

        <button class="layui-btn" onclick="kuaitui_2()">快退10秒</button>

    </div>

<!-- 播放器公共部分-->

    <div>

  <select id="beisu">

            <option value="0.5">0.5x</option>

            <option value="1" selected>1.0x</option>

            <option value="1.25">1.25x</option>

            <option value="1.5">1.5x</option>

            <option value="2">2.0x</option>

        </select>

<script src="./js/jquery-1.8.0.min.js"></script>

        <script src="./js/layui/layui.js"></script>

<script>var VIDEO_1 = document.getElementById("video_1")</script>

<script>var VIDEO_2 = document.getElementById("video_2")</script>

    <script>var VLC_1 = document.getElementById("vlcObj_1")</script>

<script>var VLC_2 = document.getElementById("vlcObj_2")</script>

    </div>

<script> 

    var layer = ''

        var useVlc = getBrowserInfo().indexOf('IE') != -1

        layui.use('layer', function () {

            layer = layui.layer

            (function () {

if (useVlc) { // IE浏览器使用vlc

                    try {

                        $("#vlc-content_1").show()

$("#vlc-content_2").show()

                    } catch (err) {

                        $("#vlc-content_1").hide()

$("#vlc-content_2").hide()

                        if (getPlatform() == 'win32') {

                            layer.confirm('当前浏览器暂未安装视频播放插件,点击确定安装', {

                                btn: ['确定', '取消']

                            }, function () {

                                window.open('http://47.96.19.54:8080/vlc/vlc-2.2.4-win32.exe')

                            })

                        } else if (platform == 'win64') {

                            layer.confirm('当前浏览器暂未安装视频播放插件,点击确定安装', {

                                btn: ['确定', '取消']

                            }, function () {

                                window.open('http://47.96.19.54:8080/vlc/vlc-2.2.4-win64.exe')

                            })

                        }

                    }

                } else { // 其他浏览器使用html5-video

                    $("#vlc-content_1").hide()

                    $("#video-contnt_1").show()

$("#vlc-content_2").hide()

                    $("#video-contnt_2").show()

                }

                // 绑定倍速

                $("#beisu").on("change", function () {

                    var v = $(this).val()

                    if (useVlc) {

                        VLC.input.rate = v

                    } else {

                        VIDEO.playbackRate = v

                    }

                })

            })()

        })

// 播放_1

        function playVideo_1(url) {

            if (useVlc) {

    url ? VLC_1.playlist.add(url) : ""

                VLC_1.playlist.play()

            } else {

                url ? VIDEO_1.src = url : ""

                VIDEO_1.networkState != 3 ? VIDEO_1.play() : ""

            }

        }

// 播放_2

        function playVideo_2(url) {

            if (useVlc) {

                url ? VLC_2.playlist.add(url) : ""

                VLC_2.playlist.play()

            } else {

                url ? VIDEO_2.src = url : ""

                VIDEO_1.networkState != 3 ? VIDEO_2.play() : ""

            }

        }

        // 暂停播放_1

        function zanting_1() {

            if (useVlc) {

                VLC_1.playlist.pause()

            } else {

                VIDEO_1.pause()

            }

        }

// 暂停播放_2

        function zanting_2() {

            if (useVlc) {

                VLC_2.playlist.pause()

            } else {

                VIDEO_2.pause()

            }

        }

        // 快进10秒播放_1

        function kuaijin_1() {

            if (useVlc) {

                VLC_1.input.time += 10000

            } else {

                VIDEO_1.currentTime += 10

            }

        }

        // 快进10秒播放_2

        function kuaijin_2() {

            if (useVlc) {

                VLC_2.input.time += 10000

            } else {

                VIDEO_2.currentTime += 10

            }

        }

        // 快退10秒播放_1

        function kuaitui_1() {

            if (useVlc) {

                VLC_1.input.time -= 10000

            } else {

                VIDEO_1.currentTime -= 10

            }

        }

// 快退10秒播放_2

        function kuaitui_2() {

            if (useVlc) {

                VLC_2.input.time -= 10000

            } else {

                VIDEO_2.currentTime -= 10

            }

        }

        //适用于IE6/7/8/9/10/11浏览器,并且安装有vlc插件,则返回true; 

        function isInsalledIEVLC() {

            var vlcObj = null

            var vlcInstalled = false

            try {

                vlcObj = new ActiveXObject("VideoLAN.Vlcplugin.2")

                if (vlcObj != null) {

                    vlcInstalled = true

                }

            } catch (e) {

                vlcInstalled = false

            }

            return vlcInstalled

        }

        // 获取浏览器类型

        function getBrowserInfo() {

            var userAgent = navigator.userAgent//取得浏览器的userAgent字符串

            var isOpera = userAgent.indexOf("Opera") >-1//判断是否Opera浏览器

            var isIE = window.ActiveXObject || "ActiveXObject" in window

            var isEdge = userAgent.indexOf("Edge") >-1//判断是否IE的Edge浏览器

            var isFF = userAgent.indexOf("Firefox") >-1//判断是否Firefox浏览器

var is360 =  userAgent.indexOf("360SE") >-1//判断是否360浏览器

            var isSafari = userAgent.indexOf("Safari") >-1 &&userAgent.indexOf("Chrome") == -1//判断是否Safari浏览器

            var isChrome = userAgent.indexOf("Chrome") >-1 &&userAgent.indexOf("Safari") >-1 &&!isEdge//判断Chrome浏览器

            if (isIE) {

                var reIE = new RegExp("MSIE (\\d+\\.\\d+)")

                reIE.test(userAgent)

                var fIEVersion = parseFloat(RegExp["$1"])

                if (userAgent.indexOf('MSIE 6.0') != -1) {

                    return "IE6"

                } else if (fIEVersion == 7) {

                    return "IE7"

                } else if (fIEVersion == 8) {

                    return "IE8"

                } else if (fIEVersion == 9) {

                    return "IE9"

                } else if (fIEVersion == 10) {

                    return "IE10"

                } else if (userAgent.toLowerCase().match(/rv:([\d.]+)\) like gecko/)) {

                    return "IE11"

                } else {

                    return "0"

                } //IE版本过低

            } //isIE end

            if (isFF) {

                return "FF"

            }

            if (isOpera) {

                return "Opera"

            }

            if (isSafari) {

                return "Safari"

            }

            if (isChrome) {

                return "Chrome"

            }

            if (isEdge) {

                return "Edge"

            }

if (is360) {

                return "360SE"

            }

        }

        // 获取浏览器32位还是64位,安装对应的vlc

        function getPlatform() {

            var agent = navigator.platform.toLowerCase()

            if (agent.indexOf("win64") >= 0 || agent.indexOf("wow64") >= 0) {

                return "win64"

            } else if (agent.indexOf("win32") >= 0 || agent.indexOf("wow32") >= 0) {

                return "win32"

            }

        }

    </script>

</body>

</html>


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/6148855.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-16
下一篇 2023-03-16

发表评论

登录后才能评论

评论列表(0条)

保存