Создать ответ 
Реализация работы ссылок при использовании тега video в html5
Автор Сообщение
ale10ey Не на форуме
Генерал-лейтенант
*

Сообщений: 352
У нас с: Nov 2014
Сообщение: #21
RE: Реализация работы ссылок при использовании тега video в html5
Все разобрался, моя ошибка Blush
У тега video был другой id, удалите архив с сообщением, который я прикреплял, так как незачем дублировать одно и тоже.

А возможно ли, если несложно реализуется для ссылки "Остановить видеоурок" сделать, чтобы работал title, а то в данный момент у меня один title на 2 ссылки.

<a onclick="play_video('interface',this);return false;" class="view" href="video/lesson_1/interface.mp4" title="Смотреть видеоурок">&darr;&nbsp;Смотреть видеоурок&nbsp;&darr;</a>

Спасибо Happy и заранее благодарен за помощь.
17.06.2015 00:17:16
Найти все сообщения Цитировать это сообщение
Admin Не на форуме
Верховный
Главнокомандующий
(Administrator)
*

Сообщений: 2,431
У нас с: Aug 2011
Сообщение: #22
RE: Реализация работы ссылок при использовании тега video в html5
Тут надо подумать... Скорее всего, придется сделать поиск по ключевым словам в ссылке и их замену. Т.е. в ссылках обязательно должно будет присутствовать, например, слово "Смотреть", которое будет заменяться на "Остановить".
Например, Смотреть видео о том, как сделать...
А после клика будет Остановить видео о том, как сделать...
17.06.2015 00:23:31
Найти все сообщения Цитировать это сообщение
ale10ey Не на форуме
Генерал-лейтенант
*

Сообщений: 352
У нас с: Nov 2014
Сообщение: #23
RE: Реализация работы ссылок при использовании тега video в html5
Здравствуйте, интересный момент вы предложили насчет поиска по ключевым словам, если получится, будет совсем неплохо...

И еще к вам вопрос :

Данный скрипт работает хорошо, а можно ли сделать так чтобы видео и ссылка были "связаны", т.е. чтобы при клике на видео (по экрану или по кнопке play) ссылка "Смотреть видеоурок" также менялась на "Остановить видеоурок".

Сейчас так:

1. Если кликнуть по ссылке "Смотреть видеоурок", видео запускается и ссылка меняется на "Остановить видеоурок".

2. Если кликнуть по экрану или на кнопку play, то видео начинается проигрываться и если кликнуть снова, то останавливается, но ссылка "Смотреть видеоурок" не меняется, а можно ли сделать так, чтобы и ссылка "Смотреть видеоурок" также менялась, т.е если кликнуть по экрану, то ссылка "Смотреть видеорок" сменилась на "Остановить видеоурок", и наоборот, т.е. по сути связать видео которое находится внутри тега <video> и ссылки "Смотреть видеорок", сейчас при клике на ссылку видео проигрывается и останавливается,
но при клике на экран или кнопку play видео также проигрывается и останавливается, но при этом ссылка не меняется, а было бы здорово, если бы ссылка тоже менялась бы.

Заранее благодарен Yes.
17.06.2015 11:48:29
Найти все сообщения Цитировать это сообщение
Admin Не на форуме
Верховный
Главнокомандующий
(Administrator)
*

Сообщений: 2,431
У нас с: Aug 2011
Сообщение: #24
RE: Реализация работы ссылок при использовании тега video в html5
Придется опять немного изменить код ссылок и тега video:
Код:
<a onclick="play_video('movie');return false;" id="link_1" class="view" href="video/lesson_1/lesson/interface.mp4" title="Смотреть видеоурок">&darr;&nbsp;Смотреть видеоурок&nbsp;&darr;</a>

<div id="lesson">
<video onplay="change_link(this,'link_1');" onpause="change_link(this,'link_1');" id="movie" class="video" controls="controls" poster="video/lesson_1/interface.png" >

Как видно, в ссылку мы добавили id и немного изменили код onclick...

В теге видео мы добавили обработчики событий onplay="change_link(this,'link_1');" onpause="change_link(this,'link_1');" и указали в них id ссылки.

JS код теперь должен быть такой:
Код:
function play_video(id_video){
var pleer=document.getElementById(id_video);

if (pleer.paused) pleer.play();
else pleer.pause();
}

function str_replace(search, replace, subject) {
return subject.split(search).join(replace);
}

function change_link(id_video,link_id){
var link=document.getElementById(link_id);

if (id_video.paused) link.innerHTML=str_replace("Остановить", "Смотреть", link.innerHTML);
else link.innerHTML=str_replace("Смотреть", "Остановить", link.innerHTML);
}
20.06.2015 21:59:27
Найти все сообщения Цитировать это сообщение
ale10ey Не на форуме
Генерал-лейтенант
*

Сообщений: 352
У нас с: Nov 2014
Сообщение: #25
RE: Реализация работы ссылок при использовании тега video в html5
Здравствуйте, работает Ok, спасибо Yes !!!

А сложно ли сделать как вы предлагали по ключевым словам, чтобы работал title для ссылки "Смотреть видеоурок" и остановить видеоурок или необязательно title, а может быть просто всплывающая подсказка при наведении на ссылку.

Если не получится реализовать придется удалить title для ссылки "Смотреть видеоурок", чтобы подсказки не было совсем, но было бы неплохо если бы подсказка работала.

Еще раз спасибо вам огромное !!!
20.06.2015 23:24:55
Найти все сообщения Цитировать это сообщение
Admin Не на форуме
Верховный
Главнокомандующий
(Administrator)
*

Сообщений: 2,431
У нас с: Aug 2011
Сообщение: #26
RE: Реализация работы ссылок при использовании тега video в html5
Что-то про title забыл...
Уже сделал. Теперь скрипт автоматически меняет "Остановить" на "Смотреть" в названии ссылки и в title при паузе и обратно при просмотре.

Т.е. если в ссылке будет надпись "Смотреть что-то там...", то при запуске видео она поменяется на "Остановить что-то там..." и в title тоже.

Просто замените функцию change_link на новую:
Код:
function change_link(id_video,link_id){
var link=document.getElementById(link_id);

if (id_video.paused) {
    link.innerHTML=str_replace("Остановить", "Смотреть", link.innerHTML);
    link.setAttribute('title', str_replace("Остановить", "Смотреть", link.getAttribute('title')));
    }
else {
    link.innerHTML=str_replace("Смотреть", "Остановить", link.innerHTML);
    link.setAttribute('title', str_replace("Смотреть", "Остановить", link.getAttribute('title')));
    }
}
21.06.2015 00:03:13
Найти все сообщения Цитировать это сообщение
ale10ey Не на форуме
Генерал-лейтенант
*

Сообщений: 352
У нас с: Nov 2014
Сообщение: #27
RE: Реализация работы ссылок при использовании тега video в html5
Здравствуйте, проверил в работе, но не написал ответ, как работает.
Спасибо - работает ! Ok Happy Yes
25.06.2015 21:40:10
Найти все сообщения Цитировать это сообщение
ale10ey Не на форуме
Генерал-лейтенант
*

Сообщений: 352
У нас с: Nov 2014
Сообщение: #28
RE: Реализация работы ссылок при использовании тега video в html5
Здравствуйте, нужна ваша профессиональная помощь в реализации работы 2 скриптов... один из которых вы помогали делать, а с другим мне пришлось помучиться чтобы он заработал (кстати вы можете этот скрипт на jQuery) опубликовать на своем сайте, если конечно сочтете нужным.

1. Имеется скрипт, который при наведении на ссылку, запускает видео, после клика меняется как ссылка, так и title.

Код:
function play_video(id_video){
    var player=document.getElementById(id_video);

if (player.paused) player.play();
    else player.pause();
    }

function str_replace(search, replace, subject) {
    return subject.split(search).join(replace);
    }

function change_link(id_video,link_id){
    var link=document.getElementById(link_id);

if (id_video.paused) {
    link.innerHTML=str_replace("Остановить", "Смотреть", link.innerHTML);
    link.setAttribute('title', str_replace("Остановить", "Смотреть", link.getAttribute('title')));
    }
else {
    link.innerHTML=str_replace("Смотреть", "Остановить", link.innerHTML);
    link.setAttribute('title', str_replace("Смотреть", "Остановить", link.getAttribute('title')));
    }
}

т.е. в данном случае title обычный, т.е при наведении показывается "Смотреть", далее после запуска видео, наводим повторно показывается "Остановить", что в принципе логично и это работает.

2. Что требуется, чтобы при наведении title не пропадал, а был все время, для этого я и делал 2 скрипт на jQuery и он работает отлично, теперь самое главное - title все время показывается "Смотреть", так как скрипт на jQuery работает при наведении, но если подключается, в нашем случае 1 скрипт, то 1 скрипт перестает работать, а если я например, хочу видео остановить и снова навожу на ссылку (кстати ссылка меняется нормально, т.е если видео не запущено, то "Смотреть", а если проигрывается то "Остановить"), то title не работает, все время показывается title "Смотреть", хотя должен быть "Остановить".

Короче, сам jQuery код:
Код:
$(document).ready(function(){    
    $(".указываем класс или id").toolTip_text();
});

(function($) {

    $.fn.toolTip_text = function(options){
        
        var defaults = {    
            xOffset: 15,        
            yOffset: -15,
            toolTip_textId: "toolTip_text",
            clickRemove: false,
            content: "",
            useElement: ""
        };
            
        var options = $.extend(defaults, options);  
        var content;
                
        this.each(function() {                  
            var title = $(this).attr("title");                
            $(this).hover(function(e){                                                                           
                content = (options.content != "") ? options.content : title;
                content = (options.useElement != "") ? $("#" + options.useElement).html() : content;
                $(this).attr("title","");                                                      
                if (content != "" && content != undefined){            
                    $("body").append("<div id='"+ options.toolTip_textId +"'>"+ content +"</div>");        
                    $("#" + options.toolTip_textId)
                        .css("position","absolute")
                        .css("top",(e.pageY - options.yOffset) + "px")
                        .css("left",(e.pageX + options.xOffset) + "px")                        
                        .css("display","none")
                        .css("width","")
                        .fadeIn("fast")
                }
            },
            function(){    
                $("#" + options.toolTip_textId).remove();
                $(this).attr("title",title);
            });    
            $(this).mousemove(function(e){
                $("#" + options.toolTip_textId)
                    .css("top",(e.pageY - options.yOffset) + "px")
                    .css("left",(e.pageX + options.xOffset) + "px")                    
            });    
            if(options.clickRemove){
                $(this).mousedown(function(e){
                    $("#" + options.toolTip_textId).remove();
                    $(this).attr("title",title);
                });                
            }
        });
      };
})(jQuery);


Скрипт универсальный, работает на всех браузерах, через css можно оформить подсказку, как захочется, тут все работает, прописываем в css класс toolTip_text (при желании можно поменять, а у меня такой класс прописан)

Вот примерно, как-то так, 1 скрипт работает OK (подсказка появляется кратковременно и она меняется в зависимости от того, что на нужно, запустить видео или остановить, меняется и ссылка и сам title), 2 скрипт работает разово, т.е навели на ссылку - показывается title, так вот мне нужно чтобы title работал как и для 1 скрипта, появлялся и показывался но не пропадал, что важно для пользователя, да и для дизайна.

Буду вам очень благодарен за помощь, сам пытался, сделать так чтобы 2 скрипта заработали, но не выходит, хотя знаю что скрипты абсолютно разные.

Заранее благодарен Yes
31.10.2016 20:59:58
Найти все сообщения Цитировать это сообщение
Admin Не на форуме
Верховный
Главнокомандующий
(Administrator)
*

Сообщений: 2,431
У нас с: Aug 2011
Сообщение: #29
RE: Реализация работы ссылок при использовании тега video в html5
Может я конечно неправильно все понял, но у Вас получается какой-то перебор и слишком сложно.

Если должно быть всего две фразы: "Смотреть видеоурок" и "Остановить видеоурок", то вот что у меня получилось, сделав с нуля:
Код:
<body>
<style type="text/css">
    #hint{display:none;position:absolute;}
</style>

<span id="hint">Смотреть видеоурок</span>

<a onclick="play_video('movie');return false;" id="link_1" class="view" href="15032010023.mp4">&darr;&nbsp;Смотреть видеоурок&nbsp;&darr;</a>
<div id="lesson">
<video onplay="change_link(this,'link_1');" onpause="change_link(this,'link_1');" id="movie" class="video" controls="controls" poster="image/add_comments.png" >
</div>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
function play_video(id_video){
    var player=document.getElementById(id_video);
    if (player.paused) player.play();
    else player.pause();
}

function change_link(id_video,link_id){
    var link=document.getElementById(link_id);
    if (id_video.paused) {
        link.innerHTML="Смотреть видеоурок";
        $("#hint").text("Смотреть видеоурок");
    }
    else {
        link.innerHTML="Остановить видеоурок";
        $("#hint").text("Остановить видеоурок");
    }
}

$(document).ready(function(){
$(".view, .video").mousemove(function(e){
    var pos=$("body").offset();
    $("#hint").stop().offset({top:e.pageY-pos.top+15,left:e.pageX-pos.left+30}).text($(this).attr("title")).fadeIn(200);
});
$(".view, .video").mouseleave(function() { $("#hint").stop().fadeOut(200); });
})(jQuery);
</script>

</body>
01.11.2016 21:18:33
Найти все сообщения Цитировать это сообщение
ale10ey Не на форуме
Генерал-лейтенант
*

Сообщений: 352
У нас с: Nov 2014
Сообщение: #30
RE: Реализация работы ссылок при использовании тега video в html5
Доброе время суток, да работает Yes, но в этом случае подсказка появляется и при наведении на ссылку и при наведении на видео, что не нужно для чего в принципе ссылка и делалась, т.е подсказка должна появляться только при наведении на ссылку, а при наведении на видео подсказки быть не должно, что в принципе и работало в 1 скрипте

Код:
function play_video(id_video){
     var player=document.getElementById(id_video);

if (player.paused) player.play();
     else player.pause();
     }

function str_replace(search, replace, subject) {
     return subject.split(search).join(replace);
     }

function change_link(id_video,link_id){
     var link=document.getElementById(link_id);

if (id_video.paused) {
     link.innerHTML=str_replace("Прервать", "Смотреть", link.innerHTML);
     link.setAttribute('title', str_replace("Прервать", "Смотреть", link.getAttribute('title')));
     }
else {
     link.innerHTML=str_replace("Смотреть", "Прервать", link.innerHTML);
     link.setAttribute('title', str_replace("Смотреть", "Прервать", link.getAttribute('title')));
     }
}

в этом случае подсказка работала только при наведении на ссылку, а для видео нет и title появлялся обычный, т.е появлялся и исчезал, а нужно чтобы был постоянно, для чего и старался подключить 2 скрипт на jQuery, хотя вы абсолютно правы, явно перемудрил...

т.е в данный момент нужно, чтобы скрипт работал только для ссылки "Смотреть видеоурок" и кстати заметил одну особенность все работает, если удаляю из ссылки title="Смотреть видеоурок", иначе при наведении на ссылку в момент проигрывания видео показывается title="Смотреть видеоурок", который прописан для ссылки, если его удалить то все OK.
01.11.2016 23:44:42
Найти все сообщения Цитировать это сообщение
Создать ответ 


Переход:


Пользователи просматривают эту тему: 1 Гость(ей)


LiveInternet
© Copyright 2011-2024 by UsefulScript.ru