Видеопроигрыватель HTML5 с плейлистом [дубликат]

Question

Видеопроигрыватель HTML5 с плейлистом [дубликат]

Вы можете использовать scala.math.BigDecimal :

BigDecimal(1.23456789).setScale(2, BigDecimal.RoundingMode.HALF_UP).toDouble

Существует ряд других режимов округления , которые, к сожалению, не очень хорошо (хотя их эквиваленты Java являются ).

2

javascript html css media-player video.js

задан dmp 13 July 2010 в 13:06

2 ответа

Другие вопросы по тегам:

javascript html css media-player video.js

Похожие вопросы:

score 9 · Answer 1

Я создал скрипт JS для этого здесь:

http://jsfiddle.net/Barzi/Jzs6B/9/

Во-первых, ваш HTML-разметка выглядит так:

<video id="videoarea" controls="controls" poster="" src=""></video>

<ul id="playlist">
    <li movieurl="VideoURL1.webm" moviesposter="VideoPoster1.jpg">First video</li>
    <li movieurl="VideoURL2.webm">Second video</li>
    ...
    ...
</ul>

Во-вторых, ваш код JavaScript через библиотеку JQuery будет выглядеть так:

$(function() {
    $("#playlist li").on("click", function() {
        $("#videoarea").attr({
            "src": $(this).attr("movieurl"),
            "poster": "",
            "autoplay": "autoplay"
        })
    })
    $("#videoarea").attr({
        "src": $("#playlist li").eq(0).attr("movieurl"),
        "poster": $("#playlist li").eq(0).attr("moviesposter")
    })
})

И последнее, но не менее важное: ваш CSS:

#playlist {
    display:table;
}
#playlist li{
    cursor:pointer;
    padding:8px;
}
#playlist li:hover{
    color:blue;                        
}
#videoarea {
    float:left;
    width:640px;
    height:480px;
    margin:10px;    
    border:1px solid silver;
}

Я добавил атрибут автовоспроизведения и видео, которое будет автоматически запускаться. проверить новую версию: jsfiddle.net/Barzi/Jzs6B/2404 — Maziar Barzi, 13 December 2017 в 19:08
есть ли способ добавления субтитров и автоматического воспроизведения следующего видео в списке? я не знаю, как добавить их в developer.mozilla.org/en-US/Apps/Fundamentals/… большое спасибо за этот хороший пример — nwgat, 4 February 2018 в 15:30

score 0 · Answer 2

      You can use this . perfect and easily     

       <html>
<head></head>
<style type="text/css">
    #media{
        background-color:#000;
        color:#fff;
        float:left;
        width:640px;
        height:400px;
    }
    #button_container{
        float:left;
    }
    .media_item{
        padding:15px;
        border:1px solid #aaa;
        background-color:#ccc;
        cursor:pointer;
        width:200px;
        margin:4px 0px 0px 4px;
        -moz-border-radius:5px;
        -webkit-border-radius:5px;
    }
</style>
<body>
    <div id="media">
        <p>Some Default Content Should Be Here</p>
    </div>
    <div id="button_container">
        <div class="media_item" id="/mymovie.mov">
            My Movie 4:26
        </div>
        <div class="media_item" id="/anothermovie.mov">
            Another Movie 5:22
        </div>
    </div>
    <script type="text/javascript">
        function update_source(src){
            document.getElementById('media').innerHTML =  '<h2>'+src+' Loaded<h2><object height="400" width="640"  id=""  codebase="http://www.apple.com/qtactivex/qtplugin.cab#version=7,3,0,0"  classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"  class="quicktime"> \
                    <param value="'+src+'" name="src"> \
                    <param value="false" name="showlogo"> \
                    <param value="tofit" name="scale"> \
                    <param value="true" name="saveembedtags"> \
                    <param value="true" name="postdomevents"> \
                    <embed height="400" width="640" src="+src+"  type="video/quicktime" postdomevents="true" controller="false"  showlogo="false" scale="tofit"> \
                        <param value="false" name="controller"> \
                        <param  value="http://images.apple.com/global/elements/quicktime/qt_endstate640x400.jpg"  name="posterframe"> \
                        <param value="false" name="showlogo"><param value="true" name="autostart"> \
                        <param value="true" name="cache"> \
                        <param value="white" name="bgcolor"> \
                        <param value="false" name="aggressivecleanup"> \
                    </embed> \
                    <param value="false" name="controller"> \
                    <param  value="http://images.apple.com/global/elements/quicktime/qt_endstate640x400.jpg"  name="posterframe"> \
                    <param value="false" name="showlogo"> \
                    <param value="true" name="autostart"> \
                    <param value="true" name="cache"> \
                    <param value="black" name="bgcolor"> \
                    <param value="false" name="aggressivecleanup"> \
                </object>';
        }

        var container = document.getElementById('button_container');
        var buttons = container.getElementsByTagName('div');
        for(var i = 0; i < buttons.length; i++){
            buttons[i].setAttribute('onclick', 'update_source(this.id)');
        }
    </script>
</body>
       </html>